JS小案例--关于时间--十分钟倒计时

最新推荐文章于 2023-02-13 13:52:43 发布

忽然呀

最新推荐文章于 2023-02-13 13:52:43 发布

阅读量2.3k

点赞数

分类专栏： JS小案例-关于时间文章标签： Js小案例--关于时间--十分钟倒计时

本文链接：https://blog.csdn.net/javasvince/article/details/88648813

版权

JS小案例-关于时间专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS小案例–关于时间–十分钟倒计时

界面和实现功能

在这里插入图片描述
功能：emmmmmm就是倒计时

用到的知识点

Math.floor()：根据“floor”的字面意思“地板”去理解；
里面的数都往小了取整数

（看到的特别容易理解）例如：
Math.floor(11.46)=Math.floor(11.68)=Math.floor(11.5)=11
Math.floor(-11.46)=Math.floor(-11.68)=Math.floor(-11.5)=-12
定时器实时时间已经介绍了可去那寻找

思路

1.设定一个时间如10分钟 60*10s
利用取余除法等求出分钟秒钟

2.利用定时器每秒 maxTime- - 从而达到倒计时效果

3.优化假如秒钟小于10 那么就+0（利用函数实时时间已经介绍了可去那寻找）

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>十分钟倒计时</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
            #dv{
				height:20px;
				width:300px;
				text-align: center;
				border:1px solid forestgreen;
				margin:100px auto;
			}
		</style>
		
	</head>
	<body>
		<div id="dv"></div>
		<script type="text/javascript">
				var dv=document.getElementById("dv");
		    	var maxTime=60*10;
				function jia(a){
					if(a<10)
					  return "0"+a;
					else
					  return a;
				}
		     	var last=function(){
				
				var minutes=Math.floor(maxTime/60); //怎么说呢  假如(60*10-1)s 正常应该就是的 9.983333  取整就是 9  
				var seconds=maxTime%60;   //余数指定是个整数  
				seconds=jia(seconds);
				var mes="还剩下"+minutes+"分"+seconds+"秒";
				dv.innerHTML=mes;
				maxTime--;
				if(maxTime==0)
				 {
					 // clearInterval(timeId);
					 alert("time is over!");
				 }
			}
		 	setInterval(function(){
				last();
			},1000);
			
		</script>
	</body>
</html>

忽然呀

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JS小案例--关于时间--十分钟倒计时

JS小案例–关于时间–十分钟倒计时界面和实现功能功能：emmmmmm就是倒计时用到的知识点Math.floor()：根据“floor”的字面意思“地板”去理解；里面的数都往小了取整数（看到的特别容易理解）例如：Math.floor(11.46)=Math.floor(11.68)=Math.floor(11.5)=11Math.floor(-11.46)=Math.floor...
复制链接

扫一扫