使用数组的 Javascript 打字机效果

标签 javascript arrays timer

我正在尝试使用数组在 javascript 中制作打字机效果。起初我在数组中硬编码了一个字符串,效果正常。后来,我尝试对用户输入做同样的事情,但行不通。

这是硬编码版本:

<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]="Hello";
function write()
{
    setTimeout(function() {
        document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
onload=write();
</script>
</head>
<body>
</body>
</html>

这是我尝试获取用户输入的版本:

<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]=document.getElementById('word').innerHTML;
function write()
{
    setTimeout(function() {
        document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
</script>
</head>
<body>
<input type="text" value="Hello World" id="word">
<br>
<a href="javascript:write()">Click</a>
</body>
</html>

请告诉我应该对我的编码进行哪些更改,以便用户输入的版本可以正常工作。

最佳答案

使用 value 属性代替 innerHTML:

arr[0]=document.getElementById('word').value;

并将其放入 write 函数中,这样您就可以在单击链接时获取值,而不是在元素存在之前获取值。

关于使用数组的 Javascript 打字机效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11920590/

相关文章:

java - 使用二维数组存储线的一部分

C++ 跨平台高分辨率定时器

javascript - 钛的Paypal集成问题

javascript - 使用 AJAX 加载图像时出现问题

javascript - 字典多项选择

c# - 动态使用计时器对象C#/。net

c++ - 来自其他类的 asio 计时器

javascript - JavaScript React Meteor 的动态导入

javascript - 带有 html5 颜色输入的 AngularJS - 动态设置值

arrays - postgres 有 jsonb 数组重叠函数吗?