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 相关文章推荐
js跑马灯代码(自写)
Apr 17 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue页面跳转实现页面缓存操作
Jul 22 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的autoload自动加载机制使用说明
2010/12/28 PHP
Javascript Global对象
2009/08/13 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
上海奥佳笔试题面试题
2016/11/16 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
门诊手术室工作制度
2014/01/30 职场文书
工作决心书范文
2014/03/11 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Pandas 稀疏数据结构的实现
2021/07/25 Python
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
在Python 中将类对象序列化为JSON
2022/04/06 Python