2016-12-22 47 views
0

我想在僅有一個div的幾秒內顯示更改文本。使用Javascript在眨眼間顯示不同的文字?

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> 
 
    \t <div id="myBlinkingDiv1">Blink 1</div> 
 
    \t <div id="myBlinkingDiv2">Blink 2</div> 
 
    \t <div id="myBlinkingDiv3">Blink 3</div> 
 
    \t <div id="myBlinkingDiv4">Blink 4</div> 
 
    \t <div id="myBlinkingDiv5">Blink 5</div> 
 
    \t <div id="myBlinkingDiv6">Blink 6</div> 
 
    \t <div id="myBlinkingDiv7">Blink 7</div> 
 
    \t <div id="myBlinkingDiv8">Blink 8</div> 
 
    \t <div id="myBlinkingDiv9">Blink 9</div> 
 
    \t <div id="myBlinkingDiv10">Blink 10</div>

煤礦不能正常工作。我無法在這裏運行數組。

+0

你想每隔幾秒改變文字一個div嗎?你的問題並不能解釋你想要做什麼。 – GeekAb

+0

是的,我希望每隔幾秒只更改一次文本。 –

+0

檢查我的答案一次,你不需要多個div和沒有先生。 :) – GeekAb

回答

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

我所試圖做的是,我改變DIV的內容每隔幾個第二套blink_speed和檢查計數數組的長度。

+0

先生,非常感謝您的幫助。 –

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>

當然,你可以調整這個更改文本的東西完全不同......

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>