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判断iframe中元素是否存在的方法
May 11 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
详解React中的组件通信问题
Jul 31 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
Javascript获取某个月的天数
May 30 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 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 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
深入浅出webpack之externals的使用
2017/12/04 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python连接oracle数据库实例
2014/10/17 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
详解Python中的路径问题
2020/09/02 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
学子宴答谢词
2014/01/25 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
同学会邀请函模板
2015/01/30 职场文书
人事任命通知书
2015/04/21 职场文书
基石观后感
2015/06/12 职场文书
68句权威创业名言
2019/08/26 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Nginx四层负载均衡的配置指南
2021/06/11 Servers