使用数组的Javascript打字机效果_Javascript_Arrays_Timer

使用数组的Javascript打字机效果

javascript arrays timer

使用数组的Javascript打字机效果,javascript,arrays,timer,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

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


var arr=新数组（）
var start=0；
var end=start+1；
arr[0]=“你好”；
函数写入（）
{
setTimeout（函数（）{
document.body.innerHTML=document.body.innerHTML+arr[0]。切片（开始，结束）；
启动++；
结束=开始+1；
如果（开始<5）{
write（）；
}
}, 500);
}
onload=write（）；

这是我试图获取用户输入的版本：

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


var arr=新数组（）
var start=0；
var end=start+1；
arr[0]=document.getElementById（'word'）.innerHTML；
函数写入（）
{
setTimeout（函数（）{
document.body.innerHTML=document.body.innerHTML+arr[0]。切片（开始，结束）；
启动++；
结束=开始+1；
如果（开始<5）{
write（）；
}
}, 500);
}

请告诉我应该在编码中进行哪些更改，以便用户输入的版本能够正常工作。

使用

值

属性，而不是

innerHTML

：

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

并将其放入

write

函数中，以便在单击链接时而不是在元素存在之前获取值。


<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);
        document.getElementById("word").value=document.getElementById("word").value + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
onload=write();
</script>
</head>
<body>
<input type="text" value="" id="word">
</body>
</html>

var arr=新数组（）
var start=0；
var end=start+1；
arr[0]=“你好”；
函数写入（）
{
setTimeout（函数（）{
//document.body.innerHTML=document.body.innerHTML+arr[0]。切片（开始，结束）；
document.getElementById（“word”）.value=document.getElementById（“word”）.value+arr[0]。切片（开始、结束）；
启动++；
结束=开始+1；
如果（开始<5）{
write（）；
}
}, 500);
}
onload=write（）；

简而言之：通常-要获取输入的当前值（包括select、textarea、radio等），请从属性值、innerHTML等处获取

无需使用数组：）你可以用同样的效果写更少的东西

// `str` is the string to write to on `target` element.
function write(str, target){


  var attr = ~"input,textarea".indexOf( target.tagName.toLowerCase() )? 'value' : 'innerHTML',
  //attr - element attribute which contains its value/html
  //if it isn't a input or textarea `attr` should be innerHTML;

  start=0,
  interval = setInterval(function() {
        target[attr] += str.substr(start++,1); //get one character starting from `start` 
        if( start >= str){
            clearInterval( interval );
        }
    }, 500);
  target[attr]  = ''; //clear the current text on target element.
};
write('hello', document.getElementById('word') ); 
//  write('hello', document.body );

我喜欢它，我想我看起来是这样的，thanx也是：DNo，你不是从HTML属性中得到它，而是从DOM属性

值中得到它