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

 更新时间:2019年01月21日 17:16:19   作者:小斯不斯  
这篇文章主要为大家详细介绍了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);

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

相关文章

  • js的回调函数详解

    js的回调函数详解

    本文主要介绍了个人对于javascript中回调函数的理解和使用方法及示例,需要的朋友可以参考下
    2015-01-01
  • JavaScript实现审核流程状态的动态显示进度条

    JavaScript实现审核流程状态的动态显示进度条

    对于有很多流程的东西,我们希望能够根据不同的阶段,用流程条对应地进行显示,非常直观,给用户带来极好的用户体验,下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能,需要的的朋友参考下
    2017-03-03
  • jQuery及JS实现循环中暂停的方法

    jQuery及JS实现循环中暂停的方法

    这篇文章主要介绍了jQuery及JS实现循环中暂停的方法,以实例形式分析了循环中暂停的原理及实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 也说JavaScript中String类的replace函数

    也说JavaScript中String类的replace函数

    最近读了sharpxiajun的博文《javascript笔记--String类replace函数的一些事》,感觉写的很好,很有帮助。
    2011-09-09
  • H5实现手机拍照和选择上传功能

    H5实现手机拍照和选择上传功能

    这篇文章主要为大家详细介绍了H5实现手机拍照和选择上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JS实现动态无缝轮播

    JS实现动态无缝轮播

    这篇文章主要为大家详细介绍了JS实现动态无缝轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • javascript实现的时间格式加8小时功能示例

    javascript实现的时间格式加8小时功能示例

    这篇文章主要介绍了javascript实现的时间格式加8小时功能,涉及javascript日期时间转换与运算相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • 微信小程序picker组件关于objectArray数据类型的绑定方法

    微信小程序picker组件关于objectArray数据类型的绑定方法

    这篇文章主要介绍了微信小程序picker组件关于objectArray数据类型的绑定方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • bootstrapfileinput实现文件自动上传

    bootstrapfileinput实现文件自动上传

    这篇文章主要介绍了bootstrapfileinput实现文件自动上传,bootstrap fileinput插件对多种类型的文件提供文件预览,并且提供了多选等功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 简述冻结JS对象方法技术

    简述冻结JS对象方法技术

    本文主要介绍了冻结JS对象方法技术,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论