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 10 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
使用vuepress搭建静态博客的示例代码
Feb 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
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python构建图像分类识别器的方法
2019/01/12 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
基于FME使用Python过程图解
2020/05/13 Python
python3将变量输入的简单实例
2020/08/19 Python
python 进程池pool使用详解
2020/10/15 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
实习鉴定评语
2014/01/19 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis