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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php去除重复字的实现代码
2011/09/16 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
商超业务员岗位职责
2014/03/12 职场文书
保护环境倡议书
2014/04/14 职场文书
个人担保书范文
2014/05/20 职场文书
2014年物流工作总结
2014/11/25 职场文书
海底两万里读书笔记
2015/06/26 职场文书
村主任当选感言
2015/08/01 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS