可以讲这两个HTMLDOM元素理解为,定时执行的函数,这样我们可以再指定的时间运行指定代码。
这两个的区别一个setTimeout只执行一次,setInterval不停的执行:看看下面两个吧:
setTimeout
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
实例:在点击按钮后5秒弹出对话框
代码如下 | 复制代码 |
<html> <head> <script type="text/javascript"> function timedMsg() { var t=setTimeout("alert('5 seconds!')",5000) } </script> </head> <body> <form> <input type="button" value="显示计时的消息框!" onClick = "timedMsg()"> </form> <p>点击上面的按钮。5 秒后会显示一个消息框。</p> </body> </html> |
setInterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setInterval(code,millisec[,"lang"])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
我们写个实例,不断的更新时间:
代码如下 | 复制代码 |
<html> <head></head> <span id="timeinfo">09:00</span> <script type="text/javascript"> function timeGoOn(){ function getFullStr(i){ return i<10?"0"+i:i; } var today = new Date(); var h = getFullStr(today.getHours()); //获取当前小时数(0-23) var m = getFullStr(today.getMinutes()); //获取当前小时数(0-23) var s = getFullStr(today.getSeconds()); //获取当前分钟数(0-59) $('#timeinfo').text(h+':'+m+':'+s); } setInterval(timeGoOn, 500); </script> </body> </html> |
时间: 2024-09-24 10:41:42