个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是 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> 中剪裁字符串一样.的确，浏览器可以处理未闭合的标签，但对于 这样的实体来说问题更大。 .最好使用纯文本(包括换行符)并将其分配给 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/
26
4
0
从 Redis 获取消息时，onDone:(){print('done')} 从未起作用。 import 'package:dartis/dartis.dart' as redis show PubS
昨天我玩了一些vim脚本，并设法通过循环来对当前输入的内容进行状态栏预测(请参见屏幕截图(灰色+黄色栏))。 问题是，我不记得我是怎么得到的，也找不到我用于该vim魔术的代码片段(我记得它很简单):它
我尝试加载 bash_completion在我的 bash (3.2.25) 中，它不起作用。没有消息等。我在我的 .bashrc 中使用了以下内容 if [ -f ~/.bash_completio
我正在尝试构建一个 bash 完成例程，它将建议命令行标志和合适的标志值。例如在下面 fstcompose 命令我想比赛套路先建议 compose_filter= 标志，然后建议来自 [alt_seq
当我尝试在重定向符号后完成路径时，bash 完成的行为就好像它仍在尝试在重定向之前完成命令的参数一样。 例如: dpkg -l > /med标签 通过在 /med 之后点击 Tab我希望它完成通往 /
我的类中有几个 CAKeyframeAnimation 对象。 他们都以 self 为代表。 在我的animationDidStop函数中，我如何知道调用来自哪里？ 是否有任何变量可以传递给 CAKe
我有一个带有 NSDateFormatter 的 NSTextField。格式化程序接受“mm/dd/yy”。 可以自动补全日期吗？因此，用户可以输入“mm”，格式化程序将完成当前月份和年份。 最佳答
有一个解决方案可以使用以下方法完成 NSTextField : - (NSArray *)control:(NSControl *)control textView:(NSTextView *)tex
我正在阅读 Passport 的文档，我注意到 serialize()和 deserialize() done()被调用而不被返回。 但是，当使用 passport.use() 设置新策略时在回调函数
在 ubuntu 11.10 上的 Firefox 8.0 中，尽管 img.complete 为 false，但仍会调用 onload 函数 draw。我设法用 setTimeout hack 解决
假设我有两个与两个并行执行的计算相对应的 future 。我如何等到第一个 future 准备好？理想情况下，我正在寻找类似于Python asyncio's wait且参数为return_when=
我正在寻找一种 Java 7 数据结构，其行为类似于 java.util.Queue，并且还具有“最终项目已被删除”的概念。 例如，应可以表达如下概念: while(!endingQueue.isFi
这是一个简单的问题。 if ($('.dataTablePageList')) { 我想做的是执行一个 if 语句，该语句表示如果具有 dataTablesPageList 类的对象也具有 menu
我用replaceWith批量替换了许多div中的html。替换后，我使用 jTruncate 来截断文本。然而它不起作用，因为在执行时，replaceWith 还没有完成。 我尝试了回调技巧 ( H
有没有办法调用 javascript 表单 submit() 函数或 JQuery $.submit() 函数并确保它完成提交过程？具体来说，在一个表单中，我试图在一个 IFrame 中提交一个表单。
我有以下方法: function animatePortfolio(fadeElement) { fadeElement.children('article').each(function(i
我刚刚开始使用 AndEngine， 我正在像这样移动 Sprite : if(pValueY < 0 && !jumping) { jumping =
我正在使用 asynctask 来执行冗长的操作，例如数据库读取。我想开始一个新 Activity 并在所有异步任务完成后呈现其内容。实现这一目标的最佳方法是什么？ 我知道 onPostExecute
我有一个脚本需要命令名称和该命令的参数作为参数。 所以我想编写一个完成函数来完成命令的名称并完成该命令的参数。 所以我可以这样完成命令的名称 if [[ "$COMP_CWORD" == 1 ]];
我的应用程序有一个相当奇怪的行为。我在 BOOT_COMPLETE 之后启动我的应用程序，因此在我启动设备后它是可见的。 GUI 响应迅速，一切正常，直到我调用 finish()，按下按钮时，什么都没
我是一名优秀的程序员,十分优秀！