JS小案例

阅读: 评论:0

JS小案例

JS小案例

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&#ElementById("dv");var maxTime=60*10;function jia(a){if(a<10)return "0"+a;elsereturn 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>

本文发布于:2024-01-28 13:29:09,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17064197557744.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

下一篇:java说课
标签:案例   JS
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23