如何使用setTimeout,setInterval或?循环显示?

问题描述 投票:0回答:1
下面的代码笔显示setTimeout,setInterval和location.reload的使用还有哪些其他选择?

我想要的下一个级别-添加一个控件,使用户可以轻松地向前/向后循环。

codepen使用setTimeout&location.reload(需要重新加载页面-希望避免这种情况)https://codepen.io/GuruAtWork/pen/PoPYbKK

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <div id="info">start</div> <script> var elem = document.getElementById("info"); setTimeout(function () { elem.innerHTML = "one"; }, 1000); setTimeout(function () { elem.innerHTML = "two"; }, 2000); setTimeout(function () { elem.innerHTML = "three"; }, 3000); setTimeout(function(){ //window.location.reload(1); location.reload() }, 4000); </script> </body> </html>

codepen使用setTimeval嵌套在setTimeout中https://codepen.io/GuruAtWork/pen/rNOBjBa

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <div id="info">start</div> <script> var elem = document.getElementById("info"); setTimeout(function () { console.log("setTimeout 1000") elem.innerHTML = "setTimeout 1000"; setInterval(function () { elem.innerHTML = "setInterval one"; console.log("setInterval 1000") }, 4000); }, 1000); setTimeout(function () { console.log("setTimeout 2000") elem.innerHTML = "setTimeout 2000"; setInterval(function () { console.log("setInterval 2000") elem.innerHTML = "setInterval two"; }, 4000); }, 2000); setTimeout(function () { console.log("setTimeout 3000") elem.innerHTML = "setTimeout 3000"; setInterval(function () { console.log("setInterval 3000") elem.innerHTML = "setInterval three"; }, 4000); }, 3000); </script> </body> </html>

下面的代码笔显示setTimeout,setInterval和location.reload的使用还有哪些其他选项可用?我想要的下一个层次是-添加控件以允许用户向前/向后循环...
javascript settimeout setinterval reload
1个回答
1
投票
您可以使用数组存储内容,并循环索引。要前进/后退,只需更改i的值并更新。
© www.soinside.com 2019 - 2024. All rights reserved.