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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
node.js实现端口转发
Apr 14 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
Javascript原型链及instanceof原理详解
May 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
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php 魔术方法详解
2014/11/11 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
keras多显卡训练方式
2020/06/10 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
应届生服务员求职信
2013/10/31 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
企业指导教师评语
2014/04/28 职场文书
社区春季防火方案
2014/06/02 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
指导老师鉴定意见
2015/06/05 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS