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插件集合推荐
Apr 19 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
详解vue 组件注册
Nov 20 Vue.js
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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
javascript的内存管理详解
2013/08/07 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
《盲人摸象》教学反思
2014/02/16 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
预备党员综合考察材料
2014/05/31 职场文书
表扬通报怎么写
2015/01/16 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android