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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
js实现简易拖拽的示例
Oct 26 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python二维键值数组生成转json的例子
2019/12/06 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
怎样声明接口
2014/09/19 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
自主招生自荐信
2013/12/08 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
如何用python清洗文件中的数据
2021/06/18 Python