js实现京东秒杀倒计时功能


Posted in Javascript onJanuary 21, 2019

本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下

首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行:

js实现京东秒杀倒计时功能

关于实现京东秒杀,之前用过其他的方法,今天给大家分享一个原生的方法吧,不会很难.

1、倒计时页面结构:

<div class="secondkill">
 <div class="top">
 <span class="red fl">掌上秒杀</span>
 <span class="num fl">0</span>
 <span class="num fl">5</span>
 <span class="colon fl">:</span>
 <span class="num fl">3</span>
 <span class="num fl">5</span>
 <span class="colon fl">:</span>
 <span class="num fl">3</span>
 <span class="num fl">0</span>
 <span class="more fr">更多</span>
</div>

2、css样式:这个是用css的编译器sass写的

.secondkill {
  .top {
   height: 40px;
   border-top: 3px solid $jdred;
   border-bottom: 1px solid #ccc;
   padding-top: 5px;
 
   .red {
    color: $jdred;
   }
 
   .num {
    background-color: #000;
    margin: 0px 3px;
    padding: 3px;
    color: white;
   }
  }

3、js部分:

//倒计时
  
//1. 指定倒计时的到期时间(2018-5-29 21:08:49)
//可以直接使用年月日时分秒来创建一个date对象,但是月是从0开始的
   var to = new Date(2018, 4, 29, 20, 20, 10);
 
   function antitime() {
    var now = new Date();
 
    //2. 拿到当前时间和过期时间之间的时间差(毫秒)
    var deltaTime = to - now; //到期时间和当前时间相差的毫秒数
    
    //如果超时了,就停止倒计时
    if (deltaTime <= 0) {
     //停止计时器
     window.clearInterval(timer);
     //停止执行下面的代码
     return;
    }
    
    //已知毫秒数,算出几分几秒几秒
    var m = Math.floor(deltaTime / (60*1000)); 
    //算出有多少秒
    var s = Math.floor(deltaTime / 1000 % 60);
    //算出多少毫秒, 毫秒数只显示10位和百位
    var ms = Math.floor(deltaTime % 1000 / 10); 
     
    //把时间的数字转成字符串, 如果分秒毫秒不足10, 则前面补0
    var timeStr = "" + (m<10?"0"+m:m) + (s<10?"0"+s:s) + (ms<10?"0"+ms:ms);
    console.log(timeStr);
 
    //063535
 
    //each是用来遍历.num元素, 其实你可以理解成循环
 
    $(".secondkill .num").each(function(index, span) {
     //console.log(span);
     $(span).html(timeStr.substring(index, index+1));
 
     //$(span), span默认是一个js对象,需要用$(span)变成一个jquery对象
     //$(span).html();这个方法是用来设置span里面的值的
     //timeStr.subSring();该方法是用来截取字符串 “abcdefg”
    });
   }
 
   //每十毫秒执行一次
   var timer = setInterval(antitime, 10);
  });

注意部分:

1、注意这个部分,时间要给定一个时间,比如京东上午十点秒杀结束,那这里时间就要填10点,注意月份是从0开始的,所以5月要写4月。这个时间如果过了这个倒计时就不会再执行了的,大家谨记。

var to = new Date(2018, 4, 29, 20, 20, 10);

2、这里拿到的是毫秒,在后面计算分秒毫秒的时候大家要注意换算。

//2. 拿到当前时间和过期时间之间的时间差(毫秒)
var deltaTime = to - now; //到期时间和当前时间相差的毫秒数

3、要判断,如果不足10就要给前面加一个0。

//把时间的数字转成字符串, 如果分秒毫秒不足10, 则前面补0
 var timeStr = "" + (m<10?"0"+m:m) + (s<10?"0"+s:s) + (ms<10?"0"+ms:ms);
 console.log(timeStr);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
htm调用JS代码
Mar 15 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
jquery maxlength使用说明
Sep 09 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
详解javascript高级定时器
Dec 31 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
浅谈javascript的闭包
Jan 23 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 #Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 #Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 #Javascript
js中对象和面向对象与Json介绍
Jan 21 #Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 #Javascript
JavaScript常用事件介绍
Jan 21 #Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 #Javascript
You might like
简单的PHP留言本实例代码
2010/05/09 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
Angular实现form自动布局
2016/01/28 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
static关键字的用法
2013/10/07 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
群众路线党课主持词
2014/04/01 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
工会工作个人总结
2015/03/03 职场文书
学术会议通知范文
2015/04/15 职场文书
离婚上诉状范文
2015/05/23 职场文书
七年级作文之下雨天
2019/12/23 职场文书
MySQL 字符集 character
2022/05/04 MySQL