2019-4-25 定时器学习

2019-04-25 06:52:51来源：博客园阅读 ()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>



<div>倒计时<span id="ms">5</span>秒，跳转至百度</div>
<div>当前时间：<span id="nowTime"></span></div>


</body>

<script type="text/javascript">
//2000毫秒后执行fn中的代码，并且接受timeid；
var timeId = setTimeout(function(){
console.log("settimeout...");
},2000);
//清除定时器
clearTimeout(timeId);

//每隔1000毫秒后执行fn中代码，并且接收timeid;
var timeId = setInterval(function(){
console.log("setinterval...");
},1000);
//清除定时器
clearInterval(timeId);
</script>

<script type="text/javascript">
// 定时器练习
//1.用户打开网页3s后，弹出一个广告
setTimeout(function(){
console.log("我是一个广告哦");
},3000);

//2.倒计时5s后跳转至百度
//获取倒计时的内容
var ms = document.getElementById("ms");
//开启一个定时器
var timeId = setInterval(function(){
//获取当前秒数，然后-1
var value = parseInt(ms.innerHTML)-1;
ms.innerHTML = value;

//如果当前是0秒则清除定时器
if (value == 0) {
clearInterval(timeId);
//跳转至百度
// location.href = "http://www.baidu.com"
}
},1000);

//3.显示当前时间，并且每秒更新一次
//获取当前时间的字符串
function getNowDate(){
//创建时期对象
var date = new Date();

//获取小时
var h = date.getHours();

//获取分
var m = date.getMinutes();

//获取秒
var s = date.getSeconds();

//将获取的时分秒组合，并返回值
return h+":"+m+":"+s;
}
//获取显示时间标签
function updateNowTime(){
nowTime.innerHTML = getNowDate();
console.log("1133");
}
//获取时间的显示位置,并将函数设置好的时间显示出来
var nowTime = document.getElementById("nowTime");
updateNowTime();

//获取的当前时间是固定的我们需要开启一个定时器，修改时间
setInterval(updateNowTime,1000);
</script>
</html>