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 相关文章推荐
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 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
一个显示天气预报的程序
2006/10/09 PHP
如何利用php+mysql保存和输出文件
2006/10/09 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
年会搞笑主持词
2014/03/27 职场文书
环保宣传标语
2014/06/12 职场文书
单位考核鉴定意见
2015/06/05 职场文书
解约证明模板
2015/06/19 职场文书