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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
json的使用小结
Jun 08 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 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
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python求解平方根的方法
2015/03/11 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
你常见到的runtime exception
2016/09/05 面试题
企业党员公开承诺书
2014/03/26 职场文书
班组长竞聘书
2014/03/31 职场文书
领导欢迎词范文
2015/01/26 职场文书
十月围城观后感
2015/06/08 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书