使用 Javascript 在闪烁时显示不同的文本？

Question

我想在几秒钟内显示不断变化的文本 div。

var blink_speed = 1000; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
    var ele = document.getElementById('myBlinkingDiv');
     ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);

        <div id="myBlinkingDiv">Blink 0</div>
     <div id="myBlinkingDiv1">Blink 1</div>
     <div id="myBlinkingDiv2">Blink 2</div>
     <div id="myBlinkingDiv3">Blink 3</div>
     <div id="myBlinkingDiv4">Blink 4</div>
     <div id="myBlinkingDiv5">Blink 5</div>
     <div id="myBlinkingDiv6">Blink 6</div>
     <div id="myBlinkingDiv7">Blink 7</div>
     <div id="myBlinkingDiv8">Blink 8</div>
     <div id="myBlinkingDiv9">Blink 9</div>
     <div id="myBlinkingDiv10">Blink 10</div>

我的不工作。我无法在此处运行排列。

Answer 1

对于您发布的内容，以下内容可以解决问题：

var blink_speed = 1000; // every 1000 == 1 second, adjust to suit
var ele = document.getElementById('myBlinkingDiv');
var t = setInterval(function () {
     var number = parseInt(ele.innerHTML.replace(/\D/g, ""));
     if (number > 10) number = -1;
     ele.innerHTML = "Blink " + ++number;
}, blink_speed);

<div id="myBlinkingDiv">Blink 0</div>

当然，您可以调整它以将文本更改为完全不同的内容...

Answer 2

您实际上不需要多个 div。

最好创建一个包含所有要显示的文本的数组，然后使用 javascript 进行更改。

检查我的例子： http://jsbin.com/napelobura/edit?html,js,output

<div id="text"></text>


var blink_speed = 1000;
var wordArray = ['One', 'Two', 'Three'];
var count=0;
var t = setInterval(function () {
    var ele = document.getElementById('text');

    ele.innerHTML = wordArray[count++];

   if(count===wordArray.length)
     count=0;

}, blink_speed);

我想做的是，我每隔几秒更改 div 的内容，由 blink_speed 设置并检查数组长度的计数。

Answer 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <script>
       function start() {
           var i = 0;
           setInterval(function () {
               document.getElementById('myBlinkingDiv').innerHTML="Blink " + i;
               i = i + 1;        
           },1000);
       }
   </script>

</head>
<body>
    <input type="button" onclick="start();" value="Start"/>
  <div id="myBlinkingDiv"></div>
</body>
</html>

使用 Javascript 在闪烁时显示不同的文本？

Show different text on blink using Javascript?

javascript

arrays

blink