我正在尝试使用数组在 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/