JS文本循環與上一個，暫停和下一個按鈕

我有下面的代碼與我的文本與下一個&上一個按鈕。我希望這個在頁面加載時重複循環，一個按鈕在兩者之間暫停。所有三個按鈕完全位於顯示文本的同一行的右側。請大家支持我。謝謝...JS文本循環與上一個，暫停和下一個按鈕

<!DOC HTML> 
<html> 
<head> 
<script type="text/javascript"> 
var messages = [ 
    'Messages for <em>kindergarden</em> class', 
    'Message for <em>1st grade</em>', 
    'Message for <em>2nd grade</em>', 
    'Message for <em>3rd grade</em>', 
    'Message for <em>4th grade</em>', 
    'Message for <em>5th grade</em>', 
    'Message for <em>6th grade</em>' 
]; 

var msgPtr = 0; 
function nextMsg(direction) { 
    msgPtr = msgPtr + direction; 
    if (msgPtr < 0) { msgPtr = messages.length-1; } 
    if (msgPtr > messages.length-1) { msgPtr = 0; } 
    document.getElementById('msg').innerHTML = messages[msgPtr]; 
} 
window.onload = function() { 
    nextMsg(0); 
} 
</script> 

<style type="text/css"> 
em { color:orange; } 
#msg { 
font-family:monospace; 
background-color:yellow; 
font-size:1em; 
width:890px; 
border:1px dotted red; 
overflow:hidden;} 
</style> 

</head> 
<body> 
<div id="msg"></div><br> 
<button onclick="nextMsg(-1)">&lt;</button> 
<button onclick="nextMsg(-1)">||</button> 
<button onclick="nextMsg(1)">&gt;</button> 
</body> 
</html>

來源

2013-02-09 user2056927

一個解決辦法是調用nextMsg（）遞歸像

function nextMsg(direction){ 
    //snip 
    nextMsg(direction); 
}

我寫的概念與jQuery一個非常快的證明，應在被改寫更清晰的方式： http://jsfiddle.net/5NUPn/5/

現在爲了在同一行上顯示消息和按鈕，您需要使用float。

#msg { float: left; }

來源

2013-02-09 11:57:34 reinder

非常感謝您雷因德....這是excately我想要什麼... – user2056927 2013-02-09 12:20:19

使用'setInterval（code，millisec）'函數。所以，你的代碼看起來應該是這樣的：

var msgPtr =0; 
var set_interval_id; 

function pause() { 
    clearInterval(set_interval_id) 
} 

function play() { 
    set_interval_id = setInterval(function() { 
     nextMsg(msgPtr); 
     msgPtr++; 
    }, 2000 /* how often to execute the code (2 sec) */); 
} 

window.onload = function() { 
    play(); 
} 

... 

<button onclick="nextMsg(-1)">&lt;</button> 
<button onclick="pause()">||</button> 
<button onclick="nextMsg(1)">&gt;</button> 

....

來源

2013-02-09 11:58:23 megatxi

我嘗試了你的代碼，它通過跳過五年級第二。 – 2013-02-09 12:18:54

感謝您編寫代碼的時間。 – user2056927 2013-02-09 12:20:43

JS文本循環與上一個，暫停和下一個按鈕

回答

相關問題