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>