Question

<script type="text/javascript">
function show(){

    var word = document.getElementById("inp").value;
    var letters = [];
    for(i=0; i<=word.length; i++){
        letters = word.substring(i,i+1);
    }
    document.getElementById("div").innerHTML = letters[0];

    //setInterval();
}

</script>
</head>

<body>

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

</body>

“letters [0]”的输出显示为未定义。我想创建一个数组，其中，假设输入是“hello”，那么输出就像：

letters[0] = "h"
letters[1] = "e"
letters[2] = "l"
....

而且，我想为它添加一个setInterval（）函数，以便它一个接一个地显示字母，但是有延迟。

谢谢！

Answer 1

使用push方法添加数组中的元素

替换

letters = word.substring(i,i+1);

通过

letters.push(word.substring(i,i+1));

<强>演示

function show() {
  var word = document.getElementById("inp").value;

  var letters = [];
  for (i = 0; i < word.length; i++) {
    letters.push(word.substring(i, i + 1));
  }

  var i = 0;
  var interval = setInterval(function() {
    document.getElementById("div").innerHTML = letters[i];
    ++i === letters.length && clearInterval(interval);
  }, 250);
}

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

要获取单个字母数组，您还可以使用split

var div = document.getElementById("div"); // Cache

function show() {
  var word = document.getElementById("inp").value; // Get latest value

  var letters = word.split(''), // Split every character and store in letters array
    i = 0; // Initialization to zero

  div.innerHTML = ''; // Clear previous text

  var interval = setInterval(function() {
    div.innerHTML += letters[i]; // Append a character

    ++i === letters.length && clearInterval(interval); // Clear interval after appending all the characters
  }, 100); // Call the function after every 100 milliseconds
}

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

Answer 2

不要在每次迭代中覆盖letters的值。使用push附加到Array对象。

function show(){

    var word = document.getElementById("inp").value;
    var letters = [];
    for(i=0; i<=word.length; i++){
        letters.push(word.substring(i,i+1))
    }
    document.getElementById("div").innerHTML = letters[0];

    //setInterval();
}

Answer 3

问题是你要覆盖letters的值而不是将其创建为数组

var interval, i;

function show() {

  var word = document.getElementById("inp").value;
  var letters = word.split('');

  clearInterval(interval); //clear the previos interval
  i = 0; //start from the first index
  interval = setInterval(function() {
    document.getElementById("div").innerHTML = letters[i];
    i = ++i < word.length ? i : 0; //if the last char is shown start from beginning
  }, 500);

}

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

Answer 4

只有代码问题是使用数组的push方法或使用索引来分配字母：

function show() {

  var word = document.getElementById("inp").value;
  var letters = [];
  for (i = 0; i <= word.length; i++) {
    letters[i] = word.substring(i, i + 1);
  }
  document.getElementById("div").innerHTML = letters[0];
}

//setInterval();

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

无法显示数组输出

4 个答案: