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

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

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

1、倒计时页面结构:

掌上秒杀

0

5

:

3

5

:

3

0

更多

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

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

php京东秒杀,js实现京东秒杀倒计时功能相关推荐

  1. js实现简单的倒计时功能

    使用Date内置对象实现一个简单的倒计时,用户输入目标年月日,点击开始可以看到剩余时间.新手练习,欢迎大家讨论并指出错误.注意不可以输入当前时间之前的时间 效果如图 html代码如下 <!-- ...

  2. html计时节日,原生js实现节日时间倒计时功能

    知识要点 1.实现原理: 用结束时间-当前时间=时间差 当前时间每过1秒时间差自然也就少了1秒 所以要1秒更新一次当前时间就达到了倒计时的效果 2.需要注意的就是时间之间的转换和对得出数值的处理 3. ...

  3. html倒计时timer,js如何使用定时器实现倒计时功能

    这次给大家带来js如何使用定时器实现倒计时功能,js使用定时器实现倒计时功能的注意事项有哪些,下面就是实战案例,一起来看一下. 日期函数 倒计时 = 用 将来的时间 - 现在的时间 问题:将来时间 距 ...

  4. android京东秒杀倒计时,js实现京东秒杀倒计时功能

    本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下 首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...

  5. JS实现京东倒计时(完整代码)

    JS实现京东秒杀倒计时(完整代码) 一.获取图片 二.css实现外观 这里比较简单,就不细说了 三.JS实现倒计时 基本思路: 1.首先使用Date()对象获取当前时间(时间戳) 2.传递参数获取活动 ...

  6. 京东手机APP抢购茅台秒杀脚本(手机用)

    基于autojs的一个京东秒杀抢购脚本(手机app用) 京东手机APP抢购茅台秒杀脚本 说实话对autojs并不是很了解,只浅尝一下,因为家里有人想买茅台嘛,始终抢不到,就到处翻,终于翻到某大佬贡献出 ...

  7. TiDB + 京东云数据库打造极速秒杀体验

    作者:luzizhuo 原文来源: https://tidb.net/blog/f1b05cca 一年一度的 11.11 又双叒叕来了,给技术人最好的礼物就是技术指南!而经过这些年的发展,购物节早已不 ...

  8. Qt做的京东优惠券抢购工具、秒杀工具

    Qt做的京东优惠券抢购工具.秒杀工具 领取优惠券URL https://a.jd.com/indexAjax/getCoupon.html?callback=jQuery5061638&key ...

  9. 秒杀商品html页面,jQuery实现每日秒杀商品倒计时功能

    html & js: jQuery每日秒杀倒计时 倒计时 COUNT DOWN 距离结束还剩 00 00 00 $(document).ready(function () { var oDat ...

最新文章

  1. 单片机c语言编译软件6,eUIDE下载-单片机c语言编译器 v1.07.32.23 官方版 - 安下载...
  2. nodejs html转excel,Node.js excel sheetjs/js-xlsx
  3. mysql数据库连接javaweb_javaweb中mysql数据库连接方法
  4. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! iview-admin@2.0.0 dev: `vue-cli-service serve
  5. 【CodeForces - 833A】The Meaningless Game(思维题,数学,可用牛顿迭代法,知识点总结)
  6. mysql 命令行 设置同步_MySQL同步(二) 设置同步
  7. 嵌入式操作系统内核原理和开发(线程状态)
  8. 第7章 聚类分析及R使用
  9. 超级大水题(还是自己过不了的水题)
  10. Router.use() requires a middleware function but got a Object
  11. SpringBoot整合RabbitMQ测试代码
  12. Operating System-Thread(3)用户空间和内核空间实现线程
  13. 一款用来下载pdf word zip img各种文件的js插件
  14. matlab傅里叶光学仿真,计算傅里叶光学实现衍射图样的计算
  15. javaBean本质
  16. php网站系统说明,飞飞php影视cms系统v3.0模版最全标签说明
  17. 计算机专业考研好还是就业好?
  18. 巧用foxmail同步qq邮箱的通讯录
  19. sunspot solr
  20. nvme固态硬盘安装win10填坑记

热门文章

  1. 浏览器页面及后端页面都没报错,但是不显示内容?
  2. 服务器文档怎么进入,服务器怎么进入
  3. echarts 自定义世界地图(含中国地图省份数据)
  4. android toast下载,Toast!
  5. IC卡和ID卡的区别以及相同之处各是什么?
  6. NSLog日志输出不全问题分析与解决方案
  7. 借助计算机软件进行文学写作,探究信息技术在汉语言文学教学中的应用
  8. 计算机网络应用是什么专业类别,网络工程专业属于什么类别
  9. 计算机在教学中的应用参考文献,中职计算机课项目教学法的应用研究结论与参考文献...
  10. 2020年Coremail邮件安全竞赛完满闭幕,北大计算中心战队勇夺第一