js实现倒计时关键代码


Posted in Javascript onMay 05, 2017

我们经常会在一些电商网站上看到秒杀倒计时,双11倒计时.其实倒计时的效果实现起来也是很简单的,并不复杂.

首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了几个步骤:

1.获取当前的时间,并且定义结束的时间

2.用求未来时间和当前时间的时间差,并且求出时分秒

3.设置定时器,让时间每秒递减

var div = document.getElementsByTagName("div")[0];
      var timer = setInterval(timers, 1000);

      function timers() {
        //获取现在的时间
        var now = new Date();
        //获取你想要的未来时间
        var future = new Date("2017/05/10");
        var time = future.getTime() - now.getTime();
        //获取距离的天数
        var day = parseInt(time / 24 / 60 / 60 / 1000);
        //获取距离的小时
        var hour = parseInt(time / 1000 / 60 / 60 % 24);
        //获取分
        var minute = parseInt(time / 1000 / 60 % 60);
        //获取秒
        var sec = parseInt(time / 1000 % 60);
        if(time < 0) {
          div.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
          clearInterval(timer);
          return;
        }
        //注意点:当时间小于10的时候,要在前面补0
        div.innerHTML = "距离结束时间还有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小时" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
      }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
js实现导航跟随效果
Nov 17 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
javascript 中的继承实例详解
May 05 #Javascript
JavaScript函数表达式详解及实例
May 05 #Javascript
Node.js中的http请求客户端示例(request client)
May 04 #Javascript
Bootstrap布局之栅格系统学习笔记
May 04 #Javascript
vue.js开发环境搭建教程
May 04 #Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
详解webpack es6 to es5支持配置
May 04 #Javascript
You might like
漂亮但不安全的CTB
2006/10/09 PHP
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php代码书写习惯优化小结
2013/06/20 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python之yield表达式学习
2014/09/02 Python
python选择排序算法实例总结
2015/07/01 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
python自动翻译实现方法
2016/05/28 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python算法中的时间复杂度问题
2019/11/19 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python如何定义一个函数
2015/09/01 面试题
社区党员先进事迹
2014/01/22 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
爱国演讲稿400字
2014/05/07 职场文书
大学生党员承诺书
2014/05/20 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书