JS倒计时

最新推荐文章于 2023-04-01 16:29:22 发布

黑盒变白盒才有意思

最新推荐文章于 2023-04-01 16:29:22 发布

阅读量174

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_36497454/article/details/80010928

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

直接上代码

详细用法可以搜一下JS 定时器

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS倒计时</title>
<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#miaoDiv").hide();
	$("#start").click(function(){
	$("#miaoDiv").show();
	var num=10;
	$("#miao").text(num);
	var id=setInterval(function(){
	     num--;
		 if(num<0){
		 	 clearInterval(id);
			 $("#miaoDiv").hide();
		 }
		 $("#miao").text(num);
		 },1000);
	});
}); 
</script>
</head>
<body>
    <div id="start">开始倒计时</div>
	<div id="miaoDiv">还有<span id="miao" style="color:red">10</span>秒</div>
</body>
</html>