JavaScript - 完成函数后如何淡入隐藏的按钮元素？ [英] JavaScript - How to fade in an invisible button element upon completion of a function?
问题描述
我是JavaScript / HTML / CSS的新手，所以我不知道如何解决这个问题。
I'm very new to JavaScript/HTML/CSS, so I'm not sure how to go about this.
我要做的是编写一个脚本，在特定函数中显示一些文本，然后，当函数完成显示文本时，自动淡入HTML按钮或等效文件，而不必单击任何特定元素。我想象按钮必须先插入并以某种方式隐藏，并且淡入是改变按钮可见性的问题。这可能在Javascript中，还是有其他（可能更容易）的方法？任何帮助将不胜感激。
What I'm trying to do is write a script that displays some text in a specific function, then, when the function is finished displaying the text, automatically fades in an HTML button or equivalent without having to click on any specific element. I would imagine that the button would have to be inserted first and made hidden somehow, and that the fade in is a matter of changing the button's visibility. Is this possible in Javascript, or are there other (possibly easier) methods? Any help would be greatly appreciated.
到目前为止，这是我的代码：
Here is my code so far:
<!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>
推荐答案
您可以在达到所需长度时显示按钮（您的代码中已经有相反的条件）。
You can show the button when the desired length has been reached (you already have the opposite condition in your code).
也许还可以改进一些事情：
Maybe also improve some things:
-
避免将字符串作为第一个参数传递给
setTimeout：最好传递一个函数。
Avoid passing a string as first argument to
setTimeout: it is best practice to pass a function instead.
避免在每次调用<时分配一个点击处理程序code>对话;你只需要定义一次。
Avoid assigning a click handler upon each call of dialogue; you only need it to be defined once.
尽量避免在函数内修改全局变量。
Avoid modifying global variables from within functions where possible.
使用HTML剪切字符串会使HTML无效，就像在< br> 中间剪辑它一样。没错，浏览器可以处理未关闭的标签，但对于& nbsp; 等实体来说会更成问题。最好使用纯文本（包括换行符）并将其分配给 textContent 属性（或 text jQuery使用 white-space CSS属性时确保换行符是这样呈现的。可以使用反引号（ES6）定义字符串，因此您只需使用回车键进行换行。
Clipping a string with HTML can make the HTML invalid, like when you clip it halfway a <br>. True, browsers can cope with unclosed tags, but it would be more problematic with entities like . It is better to use plain text (including the line breaks) and assign it to the textContent property (or text jQuery function) while using the white-space CSS property to make sure that line breaks are rendered as such. The string can be defined with backticks (ES6) so you can just use the enter key for the line breaks.
我也会在这里使用 setInterval 而不是 setTimeout ，但这只是个人偏好：
I would also use setInterval instead of setTimeout here, but that is just a personal preference:
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 - 完成函数后如何淡入隐藏的按钮元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
