Question

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

请告诉我在编码时应该做出哪些更改，以便用户输入的版本正常工作。

Answer 1

使用value属性代替innerHTML：

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

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

Answer 2

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

Answer 3

简而言之：通常 - 要获取输入的当前值（包括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 );

使用数组的Javascript打字机效果

3 个答案: