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 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
js tab 选项卡
2009/04/26 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
python中sys模块是做什么用的
2020/08/16 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
前台领班岗位职责
2013/12/04 职场文书
促销活动总结怎么写
2014/06/25 职场文书
毕业生实习证明
2014/09/19 职场文书
生日宴会祝酒词
2015/08/10 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
Python中递归以及递归遍历目录详解
2021/10/24 Python