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秒；界面：
<!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>
View Code
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;
}
View Code
window.onload=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);
}
};
View Code
时间： 2024-09-23 07:34:20