2019-4-25 定时器学习
Posted webjian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2019-4-25 定时器学习相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
定时器函数:js中提供两种定时器函数；
/*
* 延迟ms后，执行fn函数,只会执行一次。并且这个函数不会阻塞后面的代码，后面代码不用等待。
* fn:延迟后需要执行函数；
* ms:毫秒；1秒等于1000毫秒；
*
* setTimeout返回值：返回唯一定时器的timeoutId。
*/
1、新建一个定时器var timeId = setTimeout(fn,ms);
2、清除一个定时器 clearTimeout(timeId); //如果你临时想取消一个定时器。
/*
* 延迟ms后，执行fn函数,周期性执行。其实就是，setInterval会每隔ms后，执行一次我们的代码；
* fn:延迟后需要执行函数；
* ms:毫秒；1秒等于1000毫秒；
*
* setInterval返回值：返回唯一定时器的timeoutId。
*/
1、新建一个定时器var timeId = setInterval(fn,ms);
2、清除一个定时器 clearInterval(timeId); //如果你临时想取消一个定时器。
-->
<!--定时器小练习-->
<div>倒计时<span id="ms">5</span>秒，跳转至百度</div>
<div>当前时间：<span id="nowTime"></span></div>
<!--使用定时器方式，定时器：1.延迟定时器（执行一次）2.周期定时器（执行多次）-->
</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>
以上是关于2019-4-25 定时器学习的主要内容，如果未能解决你的问题，请参考以下文章