gpt4 book ai didi

javascript - 带有上一个、暂停和下一个按钮的 JS 文本循环

转载 作者:行者123 更新时间:2023-11-28 18:29:21 26 4
gpt4 key购买 nike

我有以下代码用于带有下一个和上一个按钮的文本。我希望它在页面加载时重复循环,并在两者之间用一个按钮暂停。所有三个按钮都在显示文本的同一行的右侧。请支持我..谢谢...

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

最佳答案

一个解决方案是像这样递归地调用 nextMsg()

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

我用 jQuery 写了一个非常快速的概念证明,应该以更清晰的方式重写: http://jsfiddle.net/5NUPn/5/

现在要在同一行显示您的消息和按钮,您需要使用 float。

#msg { float: left; }

关于javascript - 带有上一个、暂停和下一个按钮的 JS 文本循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14787491/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com