window中的这两个方法是比较重要的,在许多的设计中会使用到这两个方法。比如使用在倒计时抢购中。
首先来说说这两个方法的用法吧!
一:window.setTimeout();
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 //延迟几秒以后执行代码,并且只执行 一次
语法:
setTimeout(code,millisec);
例子:两秒后,弹出“hello js”;
1 第一个参数 我们要执行的代码 或则 一个函数
2 第二个参数 毫秒数
第一种写法 (直接写 js 代码)
window.setTimeout("alert('hello js')",2000);
第二种写法 先书写函数
function sayHello(){
alert('Hello JS');
}
window.setTimeout(sayHello,2000);
第三种写法 写匿名函数
window.setTimeout(
function sayHello(){
alert('hello js');
}
,2000);
//第四种写法
function sayHello(){
alert('Hello JS');
}
window.setTimeout('sayHello()',2000);
二:window.setInterval() ;
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式;//每隔几秒调用一次代码;
语法:
setTimeout(code,millisec);
注意:setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
例子:倒计时10秒;
界面:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/time.css"> <script type="text/javascript" src="../js/time.js"></script> </head> <body> <button>点击开始</button> <button>点击暂停</button> <div>10</div> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
div{ width: 100px; height: 100px; margin: 10px 10px; background-color: aqua; color: black; font-size:50px; border: 1px blue solid; text-align: center; line-height: 100px; }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
window.οnlοad=function(){ var div1=document.getElementsByTagName('div')[0]; var btn=document.getElementsByTagName('button')[0]; var btn1=document.getElementsByTagName('button')[1]; btn.onclick=function(){ time= window.setInterval(function (){ var num=parseInt(div1.innerHTML); if(num>0){//倒计时的数字需要大于0; num--; div1.innerHTML=num; } },1000); }; btn1.onclick=function(){ window.clearInterval(time); } };