你看到这篇文章时, 倒计时应该已经结束了.
又到了金三银四季节, 每年这个时候大家都在拼命刷题准备各大公司的招聘, 这个时候我们需要对一些常见的面试题有所了解, 比如今天要说的就是我在网上看到的, 要你手写一个 JS 倒计时效果, 手写代码是什么感觉? 速度 70 迈, 心情真是嗨, 本想好好秀一下的, 谁知刚落笔就 ... ... 告辞! 不过, 多写代码确实可以保持手感, 虽然刚开始会一直支支吾吾写不出, 不过越写越顺手, 越能发现自己的知识盲点, 查漏补缺.
原理
既然是倒计时, 肯定是要涉及到时间日期的操作了. JS 里可以用 new Date() 来创建各种格式的时间日期. 要能够倒计时, 我们需要设置一个起始时间以及一个终止时间, 计算出这两段时间的差, 然后通过循环调用, 每隔 1 秒刷新一次就实现了. 假设我们以当前电脑的时间作为起始时间, 然后定死一个终止时间, 由于起始时间一直在递增, 而终止时间不变, 那么通过递归后就是一个倒计时了. 整体思路不难理解, 不过真正实现其代码来还是有诸多需要注意的.
实战
知道了大致实现思路后, 你可以试着开始手写代码. 我们定义一个函数, 名为 countDown . 首先获取当前时间, 现在是北京时间 2019 年 3 月 16 日, 16 时 57 分, 倒计时 1 小时, 那么终止时间是 2019 年 3 月 16 日, 17 时 57 分 .
- function countDown(){
- var nowtime = new Date();
- var endtime = new Date("2019/03/16,17:57:00");
- var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
- }
lefttime 保存着两个时间的差值, getTime() 方法获取到时间戳, 由于它是以 ms 为单位的, 我们需要精确到秒就可以, 所以除以 1000 就是以 s 为单位.
接着, 我们可以将这个时间分别计算为 天, 时, 分, 秒 了. 代码如下
- var d = parseInt(lefttime / (24*60*60))
- var h = parseInt(lefttime / (60 * 60) % 24);
- var m = parseInt(lefttime / 60 % 60);
- var s = parseInt(lefttime % 60);
1 天 24 小时, 1 小时 60 分钟, 1 分钟 60 秒, 稍微转换就能计算出上面几个变量的值. 到了这里, 有个小细节需要注意, 如果是 10 以下的数我们要进行补零!. 于是我们在写一个补零函数, 名为 addZero .
- function addZero(){
- return i <10 ? "0" + i: i + "";
- }
好了, 接下来对上面求得的 d,h,m,s 进行补零.
- d = addZero(d)
- h = addZero(h);
- m = addZero(m);
- s = addZero(s);
最后我们只需要利用 setTimeout 循环调用, 每隔 1 s 刷新就可以了.
setTimeout(showtime, 1000);
OK! 一个倒计时函数大功告成. 为了把它显示到浏览器页面上, 我们需要在加点 html 代码:
- HTML
- <p class="count"></p>
然后在 JS 里加上:
- JS
- document.querySelector(".count").innerHTML = ` 活动倒计时 ${d} 天 ${h} 时 ${m} 分 ${s} 秒 `;
- if (lefttime <= 0) {
- document.querySelector(".count").innerHTML = "活动已结束";
- return;
- }
这里的 if 判断当倒计时为 0 的时候, 就显示 活动已结束 , 并且把函数 return 掉.
最终效果
由于上传 GIF 动图时出现了点小问题, 你可以自己 run 下代码并到浏览器查看效果, 这样记忆更深哦~
完整代码
- <body>
- <p class="count"></p>
- <script>
- Windows.onload = function () {
- countDown();
- function addZero(i) {
- return i <10 ? "0" + i: i + "";
- }
- function countDown() {
- var nowtime = new Date();
- var endtime = new Date("2019/03/16,17:57:00");
- var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
- var d = parseInt(lefttime / (24*60*60))
- var h = parseInt(lefttime / (60 * 60) % 24);
- var m = parseInt(lefttime / 60 % 60);
- var s = parseInt(lefttime % 60);
- d = addZero(d)
- h = addZero(h);
- m = addZero(m);
- s = addZero(s);
- document.querySelector(".count").innerHTML = ` 活动倒计时 ${d} 天 ${h} 时 ${m} 分 ${s} 秒 `;
- if (lefttime <= 0) {
- document.querySelector(".count").innerHTML = "活动已结束";
- return;
- }
- setTimeout(countDown, 1000);
- }
- }
- </script>
- </body>
总结
知识需要通过实践来验证, 先学好必备的基础知识, 然后找些 demo 来练习巩固, 在练习的过程中也许会发现自己以前忽视的一些小问题, 也就起到了查漏补缺的作用. 在 coding 中寻找快乐!
来源: http://www.jianshu.com/p/97bb1f11eafb