码迷,mamicode.com
首页 > 其他好文 > 详细

2019-4-25 定时器学习

时间:2019-04-25 11:45:06      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:ati   学习   打开网页   等于   代码   java   ref   定时器   执行   

<!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 定时器学习

标签:ati   学习   打开网页   等于   代码   java   ref   定时器   执行   

原文地址:https://www.cnblogs.com/webJian/p/10767292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!