Javascript JS文本循环与上一个、暂停和；下一个按钮_Javascript_Html_Css_Loops

Javascript JS文本循环与上一个、暂停和；下一个按钮

javascript html css loops

Javascript JS文本循环与上一个、暂停和；下一个按钮,javascript,html,css,loops,Javascript,Html,Css,Loops,我随身携带以下代码，用于带有“下一步”和“上一步”按钮的文本。我希望在页面加载时重复循环，在两者之间有一个暂停按钮。所有三个按钮应完全位于显示文本的同一行的右侧。请支持我。。谢谢 <!DOC HTML> <html> <head> <script type="text/javascript"> var messages = [ 'Messages for <em>kindergarden</em> class',

我随身携带以下代码，用于带有“下一步”和“上一步”按钮的文本。我希望在页面加载时重复循环，在两者之间有一个暂停按钮。所有三个按钮应完全位于显示文本的同一行的右侧。请支持我。。谢谢

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


变量消息=[
‘幼稚园班讯息’，
“一年级留言”，
“二年级留言”，
“三年级留言”，
“四年级信息”，
“五年级留言”，
“六年级留言”
];
var msgPtr=0；
功能NEXTMG（方向）{
msgPtr=msgPtr+方向；
如果（msgPtr<0）{msgPtr=messages.length-1；}
如果（msgPtr>messages.length-1）{msgPtr=0；}
document.getElementById（'msg'）.innerHTML=messages[msgPtr]；
}
window.onload=函数（）{
nextsg（0）；
}
em{颜色：橙色；}
#味精{
字体系列：monospace；
背景颜色：黄色；
字号：1em；
宽度：890px；
边框：1px点红色；
溢出：隐藏；}


||

一种解决方案是像

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

我用jQuery编写了一个非常快速的概念证明，应该以更简洁的方式重写：

现在要在同一行上显示消息和按钮，需要使用float

#msg { float: left; }

一种解决方案是递归调用nextsg（），就像

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

我用jQuery编写了一个非常快速的概念证明，应该以更简洁的方式重写：

现在要在同一行上显示消息和按钮，需要使用float

#msg { float: left; }

使用“设置间隔（代码，毫秒）”功能。因此，您的代码应该如下所示：

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>

....

var msgPtr=0；
变量集\间隔\ id；
函数暂停（）{
clearInterval（设置间隔\u id）
}
函数播放（）{
set\u interval\u id=setInterval（函数（）{
nextMsg（msgPtr）；
msgPtr++；
}，2000/*执行代码的频率（2秒）*/；
}
window.onload=函数（）{
play（）；
}
...
||
....

使用“设置间隔（代码，毫秒）”功能。因此，您的代码应该如下所示：

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>

....

var msgPtr=0；
变量集\间隔\ id；
函数暂停（）{
clearInterval（设置间隔\u id）
}
函数播放（）{
set\u interval\u id=setInterval（函数（）{
nextMsg（msgPtr）；
msgPtr++；
}，2000/*执行代码的频率（2秒）*/；
}
window.onload=函数（）{
play（）；
}
...
||
....