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);

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

相关文章

  • 如何阻止移动端浏览器点击图片浏览

    如何阻止移动端浏览器点击图片浏览

    这篇文章主要介绍了如何阻止移动端浏览器点击图片浏览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • layui表单提交到后台自动封装到实体类的方法

    layui表单提交到后台自动封装到实体类的方法

    今天小编就为大家分享一篇layui表单提交到后台自动封装到实体类的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS与HTML结合实现流程进度展示条思路详解

    JS与HTML结合实现流程进度展示条思路详解

    基于js与html相结合实现的流程进度展示条,非常实用,在各大网站都可以用到,下面小编给大家带来了JS与HTML结合实现流程进度展示条思路详解,需要的朋友参考下吧
    2017-09-09
  • Js获取图片原始宽高的实现代码

    Js获取图片原始宽高的实现代码

    下面小编就为大家带来一篇Js获取图片原始宽高的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • JS字符串长度判断,超出进行自动截取的实例(支持中文)

    JS字符串长度判断,超出进行自动截取的实例(支持中文)

    下面小编就为大家带来一篇JS字符串长度判断,超出进行自动截取的实例(支持中文)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    这篇文章主要介绍了手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 详解Webpack + ES6 最新环境搭建与配置

    详解Webpack + ES6 最新环境搭建与配置

    这篇文章主要介绍了详解Webpack + ES6 最新环境搭建与配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • JavaScript设计模式之单例模式

    JavaScript设计模式之单例模式

    单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 微信小程序 如何引入外部字体库iconfont的图标

    微信小程序 如何引入外部字体库iconfont的图标

    这篇文章主要为大家详细介绍了微信小程序引入外部字体库iconfont图标的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JavaScript中常见的高阶函数总结

    JavaScript中常见的高阶函数总结

    JavaScript的函数其实都指向某个变量,既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数,这篇文章主要给大家介绍了关于JavaScript中常见的高阶函数,需要的朋友可以参考下
    2022-02-02

最新评论