经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript仿京东实现秒杀倒计时案例详解
来源:jb51  时间:2022/3/8 10:54:48  对本文有异议

功能介绍:

1、这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)

2、三个黑色的盒子,分别存放时、分秒

3、三个盒子利用innerHTML存入倒计时

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. div {
  10. background-color: black;
  11. width: 50px;
  12. height: 50px;
  13. margin-left: 20px;
  14. float: left;
  15. color: white;
  16. font-size: 20px;
  17. text-align: center;
  18. line-height: 50px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class='h1'></div>
  24. <div class='m'></div>
  25. <div class='s1'></div>
  26. <script>
  27. //把时间放到div中去
  28. var div = document.querySelectorAll('div')
  29. var timer1 = setInterval(function() {
  30. var date1 = new Date(2022, 3, 2, 18, 40, 0); //获得到点截至时间距离标准时间的毫秒数
  31. var date2 = new Date(); //获得目前时间距离准时间的毫秒数
  32. var date = (date1 - date2) / 1000; //用到点时间的毫秒数减去现在时间的毫秒数,必须先化为秒单位,之后再进行转换
  33. var h = parseInt((date / 60 / 60) % 24); //小时
  34. var m = parseInt((date / 60) % 60); //分钟
  35. var s = parseInt(date % 60); //秒 一定要包含在这个函数中,因为是间隔1秒就要重新算一遍,需要提高准确率的话,把秒数减少(刷新间隔)
  36. div[2].innerHTML = s
  37. div[1].innerHTML = m
  38. div[0].innerHTML = h
  39. }, [1])
  40. </script>
  41. </body>
  42. </html>

改进:

  1. <script>
  2. //把时间放到div中去
  3. var div = document.querySelectorAll('div')
  4. var timer1 = setInterval(fn, [1000])
  5. var date1 = new Date(2022, 3, 2, 18, 40, 0);
  6. var date2 = new Date();
  7. var date = (date1 - date2) / 1000;
  8. var h = parseInt((date / 60 / 60) % 24);
  9. var m = parseInt((date / 60) % 60);
  10. var s = parseInt(date % 60);
  11. div[2].innerHTML = s
  12. div[1].innerHTML = m
  13. div[0].innerHTML = h
  14. //解决刚刷新,数字不显示的问题
  15. function fn() {
  16. var date1 = new Date(2022, 3, 2, 18, 40, 0); //获得到点截至时间距离标准时间的毫秒数
  17. var date2 = new Date(); //获得目前时间距离准时间的毫秒数
  18. var date = (date1 - date2) / 1000; //用到点时间的毫秒数减去现在时间的毫秒数,必须先化为秒单位,之后再进行转换
  19. var h = parseInt((date / 60 / 60) % 24); //小时
  20. var m = parseInt((date / 60) % 60); //分钟
  21. var s = parseInt(date % 60); //秒 一定要包含在这个函数中(最好是封装一个函数),因为是间隔1秒就要重新算一遍,需要提高准确率的话,把秒数减少(刷新间隔).如果间隔比较大的话,一刷新页面,会产生空白。解决方法就是,在未调用这个函数前,先把时间放入到div盒子中
  22. div[2].innerHTML = s
  23. div[1].innerHTML = m
  24. div[0].innerHTML = h
  25. }
  26. </script>

添加停止倒计时按钮:

  1. <button>停止倒计时</button>
  2. var btn = document.querySelector('button')
  3. btn.addEventListener('click', function() {
  4. clearInterval(timer1)
  5. })

到此这篇关于JavaScript仿京东实现秒杀倒计时案例详解的文章就介绍到这了,更多相关JavaScript秒杀倒计时内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号