打字机的Javascript使用效果阵 [英] Javascript Typewriter Effect using Array

查看:94
本文介绍了打字机的Javascript使用效果阵的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图让使用数组在JavaScript打字机效果。起初我很难codeD数组中的字符串和影响工作正常。后来,我试着做用户输入同样的事情,但它是行不通的。

I am trying to make a typewriter effect in javascript using array. At first I hardcoded a string in the array and the effect worked properly. Later, i tried doing the same thing with user input but it would not work.

这是很难codeD版:

<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>

请告诉我什么样的变化,我应该在我的编码做出让用户输入的版本正常工作。

Please tell me what changes i should make in my coding so that the version with user input works properly.

推荐答案

使用属性,而不是的innerHTML

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

和放了函数里,让你当链接被点击的之前的元素存在的话,而不是价值。

And put that inside the write function, so that you get the value when the link is clicked instead of before the element even exists.

这篇关于打字机的Javascript使用效果阵的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆