1

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

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

4

3 回答 3

2

使用该value属性而不是innerHTML：

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

并将其放在write函数中，以便在单击链接时获取值，而不是在元素甚至存在之前获取值。

于 2012-08-12T07:55:14.543 回答
0 
<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>
于 2012-08-12T08:12:05.630 回答
0

简而言之：通常 - 获取输入的当前值（包括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 );
于 2012-08-12T10:10:41.810 回答