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 相关文章推荐
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
Java无向树分析 实现最小高度树
Apr 09 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删除数组中的特定元素的代码
2012/06/28 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
一端时间轮换的广告
2006/06/26 Javascript
关于Javascript 的 prototype问题。
2007/01/03 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python测试模块doctest使用解析
2019/08/10 Python
python环境下安装opencv库的方法
2020/03/05 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
大学生简短的自我评价
2014/09/12 职场文书
优秀校长事迹材料
2014/12/24 职场文书
高中班主任评语
2014/12/30 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android