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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
vue+element实现表单校验功能
May 20 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python opencv实现图像边缘检测
2019/04/29 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
化工专业应届生求职信
2013/11/08 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
文明城市创建标语
2014/06/16 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书