gpt4 book ai didi

JavaScript - 如何在完成功能后淡入不可见的按钮元素?

转载 作者:行者123 更新时间:2023-11-28 15:04:40 27 4
gpt4 key购买 nike

我是 JavaScript/HTML/CSS 的新手,所以我不确定该怎么做。

我想做的是编写一个脚本,在特定函数中显示一些文本,然后,当该函数完成显示文本时,自动淡入 HTML 按钮或等效按钮,而无需单击任何特定元素.我想必须首先插入按钮并以某种方式隐藏,淡入是改变按钮可见性的问题。这在 Javascript 中是否可行,或者是否有其他(可能更简单)的方法?任何帮助将不胜感激。

到目前为止,这是我的代码:

<!DOCTYPE=HTML>
<html>
<head>
<title>Sandbox</title>
<link rel="stylesheet" href="mainstyle.css">
<script src="main.js"></script>
</head>
<body>
<p id="pid"></p>
<script>

var a = 1;
function dialogue(){
var message = "This message is (hopefully) a successful implementation of JS video game scrolling! <br> <br> Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript! <br> <br> Let's see if we can add some fade-in buttons, shall we? <br> <br> (By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)";
if(a <= message.length) {
var txt = message.substring(0,a);
document.getElementById ("pid").innerHTML = txt;
setTimeout("dialogue()",20);
a++;
document.onclick = function(){
a = message.length;
};
}
};

dialogue();


</script>
<button id="button1">Ooh, here's one! Click to see what it does!</button>
</body>
</html>

最佳答案

您可以在达到所需长度时显示按钮(您的代码中已经有相反的条件)。

也许还可以改进一些东西:

  • 避免将字符串作为第一个参数传递给 setTimeout :最好的做法是传递一个函数。

  • 避免在每次调用 dialogue 时分配点击处理程序;你只需要定义一次。

  • 尽可能避免在函数内修改全局变量。

  • 用 HTML 剪裁字符串会使 HTML 无效,就像在 <br> 中剪裁字符串一样.的确,浏览器可以处理未闭合的标签,但对于 &nbsp; 这样的实体来说问题更大。 .最好使用纯文本(包括换行符)并将其分配给 textContent使用 text 属性(或 white-space jQuery 函数) CSS 属性,以确保换行符按原样呈现。字符串可以用反引号 (ES6) 定义,因此您只需使用回车键换行即可。

我也会使用 setInterval而不是 setTimeout在这里,但这只是个人喜好:

var message = `This message is (hopefully) a successful implementation of JS video game scrolling!

Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript!

Let's see if we can add some fade-in buttons, shall we?

(By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)`;

var timer = setInterval(dialogue, 20);

function dialogue(add = 1){ // By default 1 character is made visible
var len = $("#pid").text().length + add; // Get desired length
$("#pid").text(message.substr(0, len)); // Make the change
if (len < message.length) return; // Nothing more to do
clearInterval(timer); // All is shown, so stop the animation
$("#button1").fadeIn(); // and fade in the button
};

// On click, pass the length of the message to the function
$(document).click(dialogue.bind(null, message.length));

// Hide the button on page load
$("#button1").hide();
#pid { white-space: pre-wrap }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="pid"></p>
<button id="button1">Ooh, here's one! Click to see what it does!</button>

关于JavaScript - 如何在完成功能后淡入不可见的按钮元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49687644/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com