定时器在JS中的作用：
1）制作动画、时钟、倒计时
2）异步操作
3）函数缓冲与节流
定时器类型：
1）setTimeout 只执行一次的定时器
2）clearTimeout 关闭只执行一次的定时器
3）setInterval 反复执行的定时器
4）clearInterval 关闭反复执行的定时器
demo：
1）setTimeout(自制弹窗)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.pop_con{
/*暂时隐藏*/
display: none;
}
.pop{
300px;
height:200px;
background-color: #fff;
border:1px solid #000;
/*使框居中*/
position: fixed;
left:50%;
top:50%;
margin-left:-150px;
margin-top: -100px;
/*让弹窗覆盖在mask上面*/
z-index:9999;
}
.mask{
position: fixed;
100%;
height: 100%;
background-color: #000;
left:0;
top:0;
/*设置透明度*/
opacity:0.3;
/*ie兼容的透明度*/
filter:alpha(opacity=0.3);
/*让弹窗覆盖在mask上面*/
z-index:9990;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oPop = document.getElementById('pop');
<!--设置定时器-->
setTimeout(showpop,2000);
function showpop() {
oPop.style.display = 'block';
}
}
</script>
</head>
<body>
<h1>首页标题</h1>
<p>页面内容</p>
<!--自制弹框-->
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
</div>
<div class="mask"></div>
</div>
</body>
</html>
2）setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
100px;
height:100px;
background-color: gold;
position: fixed;
left:20px;
top:20px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oBox = document.getElementById('box');
var left = 20;
var timer = setInterval(function () {
left+=2;
oBox.style.left = left + 'px';
//按照一定条件关闭定时器
if(left>700){
clearInterval(timer);
}
},30)
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
3）定时器制作时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器制作时钟</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
function timego() {
//实例化一个对象Date
var now = new Date();
var year = now.getFullYear();
//这里要注意，这里得到的月份是0~11月，所以要+1
var month = now.getMonth()+1;
var date = now.getDate();
//星期：星期天是一个礼拜的第一天，week=0
var week = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//标签里面的内容：innerHTML
oDiv.innerHTML = '当前时间：'+year+'年'+month+'月'+date+'日'+
' '+toweek(week)+" "+tudou(hour) +':'+ tudou(minute)+":"+ tudou(second);
}
//一秒钟刷新一次，但是这样的话，页面的第一秒中是没有内容的，所以加一个timego（）
timego();
setInterval(timego,1000);
}
//将数字返回成汉字
function toweek(num){
switch(num){
case 0:
return '星期天';
case 1:
return '星期一';
case 2:
return '星期二';
case 3:
return '星期三';
case 4:
return '星期四';
case 5:
return '星期五';
case 6:
return '星期六';
}
}
function tudou(num) {
if(num<10){
return '0'+ num;
}
else{
return num;
}
}
</script>
</head>
<body>
<div class="div1" id="div1"></div>
</body>
</html>
4）定时器制作倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器制作倒计时</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
//真实的时间是要从服务器获取的，不能从客户端获取
function tiimeleft(){
var now = new Date();
var future = new Date(2018,5,19,15,21,0);
//ms转为s
var lefts = parseInt((future-now)/1000);
var days = parseInt(lefts/86400);
var hours = parseInt((lefts%86400)/3600);
var minutes = parseInt(((lefts%86400)%3600)/60);
var seconds = parseInt(lefts%60);
//这是一个有底线的倒计时
if(lefts<=0){
window.location.href = 'http://www.baidu.com';
}
oDiv.innerHTML = '距离2018年6月22日24时还有'+days+'天'+tudou(hours)+'时'
+tudou(minutes)+'分'+tudou(seconds)+'秒';
}
tiimeleft();
setInterval(tiimeleft,1000);
};
// 将数字返回成汉字
function tudou(num) {
if(num<10){
return '0'+ num;
}
else{
return num;
}
}
</script>
</head>
<body>
<div class="div1" id="div1"></div>
</body>
</html>