1

次と前のボタンを使用したテキストには、以下のコードがあります。ページの読み込み時にこれを繰り返しループさせ、両方の間で一時停止するためのボタンを1つにしたい。3 つのボタンはすべて、テキストを表示する同じ行の右側に完全に配置されます。私をサポートしてください..ありがとう...

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

2 に答える 2

1

1 つの解決策は、次のように nextMsg() を再帰的に呼び出すことです。

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

よりクリーンな方法で書き直す必要がある jQuery を使用して、非常に簡単な概念実証を作成しました: http://jsfiddle.net/5NUPn/5/

メッセージとボタンの両方を同じ行に表示するには、float を使用する必要があります。

#msg { float: left; }
于 2013-02-09T11:57:34.080 に答える
0

「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-09T11:58:23.997 に答える