您的位置：首页 > Web前端 > JavaScript

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

2019-03-18 20:10 369 查看

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

界面和实现功能


功能：emmmmmm就是倒计时

用到的知识点

  1. 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

  2. 定时器 实时时间已经介绍了 可去那寻找

思路

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航