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

时间:2016-12-22 10:20:18

标签: javascript arrays blink

我想在几秒内只在一个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>

我的工作没有用。我不能在这里运行数组。

3 个答案:

答案 0 :(得分:1)

对于你发布的内容,以下内容将起到作用:

&#13;
&#13;
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);
&#13;
<div id="myBlinkingDiv">Blink 0</div>
&#13;
&#13;
&#13;

当然你可以调整它来将文本改为完全不同的东西......

答案 1 :(得分:1)

你实际上不需要多个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);

我要做的是,我正在通过blink_speed设置每隔几秒更改div的内容并检查数组长度的计数。

答案 2 :(得分:0)

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