• 妈的,写之前不说,写完了了你说不行.中途我还问你你说对.你真是中国第一Monkey
  • 沃妮马,过的真快!转眼又上班了.等待十月一.
  • 还有1天就是端午节了.过的真快, 在这个公司工作半年啦..
  • 咦~哪个弟弟CC我呢?
  • 简单,简单.我提个思路.
  • 不算今天还有2天就放假了.
  • 一切随缘,随波逐流.
  • 我的天啊,手欠把写了两天的项目删除了,回收站都没有!真是一干二净!心态爆炸!
  • 如果您需要随机数,请使用 random_int(). 如果需要随机字节字符串,请使用 random_bytes(). 所以不要使用 mt_rand(), rand(), 或 uniqid() .
  • 五一过去的真快

JavaScript好玩的定时器

JavaScript KIENG 1年前 (2018-09-11) 66102次浏览 已收录 2个吐槽 扫描二维码

多次定时器

setInterval(函数名,定时时间) //第一种

setInterval(function(){},定时时间) //第二种

//清除多次定时器
clearInterval(定时器变量)

单次定时器

//第一种使用方式
setTimeout(函数名,定时时间)
   //    第二种使用方式
setTimeout(function(){},定时时间)
//定时时间单位:毫秒  1 秒= 1000 毫秒
//清除定时器
clearTimeout(定时器变量) 

让我们利用定时器来简单的做一个倒计时的特效吧!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
			*{margin:0px;padding:0px;}
			#box{width:200px;height:50px;background:green;color:white;text-align:center;font:bold 30px/50px 黑体; margin:0px auto;}
	</style>
</head>
<body>
	<div id="box">10</div>
</body>
<script>
//找对象
	var box = document.getElementById('box');
	//初始化的值
	var  num = box.innerHTML;
//改属性
	
	var timmer = setInterval(function(){
		num--;		
		console.log(num);
		//把 num 的值赋值给 div 元素的对象的文本值
		box.innerHTML = num;
		if(num == 0){
			//清除定时器
			clearInterval(timmer);
			alert('倒计时结束');
		}
	},1000)


</script>
</html>
演示
KIENG , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明原文链接:JavaScript 好玩的定时器
本文章链接:https://blog.kieng.cn/153.html
喜欢 (1)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. Mr.F
    屌啊签到成功!签到时间:2018-09-11 11:15:15,每日打卡,生活更精彩哦~
    Mr.F2018-09-11 11:15 回复 Windows 10 | Chrome 63.0.3239.132
    • 基本操作 :mrgreen:
      KIENG2018-09-11 11:16 回复 Windows 10 | 搜狗浏览器 2.X