JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

本文实例讲述了JS秒杀倒计时功能。分享给大家供大家参考，具体如下：

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body onload="miaosha();">
    <p class="tit_right" style="">
      <span id="d" style="">00</span>天
      <span id="h" style="">00</span>时
      <span id="m" style="">00</span>分
      <span id="s" style="">00</span>秒
    </p>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
  var timer = null;
  // 秒杀函数
  function miaosha(year, month, day, hour, minute, second) {
    // 剩余时间：设定的-当前的
    var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date());
    // parseInt()返回一个整数。得出剩余的时分秒
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10);
    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
    var seconds = parseInt(leftTime / 1000 % 60, 10);
    // 结束的时候
    if (seconds < 0) {
      alert("快点！");
      clearTimeout(timer);
    }
    else {
      // 格式的转化
      days = fix(days, 2);
      hours = fix(hours, 2);
      minutes = fix(minutes, 2);
      seconds = fix(seconds, 2);
      // 递归调用 注意：比当前时间大！
      timer = setTimeout("miaosha(2019,09,05,10,56,00)", 1000); //// 设置开始的时间
      // 设置时分秒
      document.getElementById("h").innerHTML = hours;
      document.getElementById("m").innerHTML = minutes;
      document.getElementById("s").innerHTML = seconds;
      document.getElementById("d").innerHTML = days;
    }
  }
  //fix函数：数字加0
  function fix(num, length) {
    console.log(num);
    // 数字转化为字符串 进行拼接
    return num.toString().length<length?'0'+num:num;
  }
</script>

显示

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线秒表工具：
http://tools.jb51.net/bianmin/miaobiao

在线日期/天数计算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期天数差计算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • C#结合JavaScript实现秒杀倒计时的方法

    本文实例讲述了C#结合JavaScript实现秒杀倒计时的方法.分享给大家供大家参考.具体如下: 最近做个秒杀活动,要用到倒计时.要求每周三上午10:00开始倒计时 private string Dtime() { byte tempB = (byte)DateTime.Now.DayOfWeek; byte dayByte = (byte)DayOfWeek.Wednesday; DateTime wednesdayNow = DateTime.Now.AddDays(dayByte - te

  • jQuery倒计时代码(超简单)

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script

  • Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页

  • javascript 实现 秒杀,团购 倒计时展示的记录 分享

    javascript 实现 秒杀,团购 倒计时展示的记录 分享

    最近做了一个房产的秒杀,团购的电子商务网站(房子也有秒杀,出手不小啊),其中里面有一个秒杀的倒计时展示,主要是判断当前时间距离秒杀开始还有多少时间,还有秒杀开始和秒杀结束的各种展示.其中最主要的一点就是所谓的当前时间不能使用浏览器通过new Date()获取的客户端时间,这样只要用户修改了自己的机器时间那么倒计时就会乱透了,所以这个当前时间必须使用的是服务器时间,所以采用的是静态缓存页面所以这个当前时间使用ajax方式进行获取 复制代码 代码如下: <!DOCTYPE html PUBLIC &qu

  • jquery实现手机发送验证码的倒计时代码

    复制代码 代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.

  • jquery 倒计时效果实现秒杀思路

    复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59","#colockbox1"); }); function countDown(time,id){ var day_elem = $(id).find('.day'); var hour_elem = $(id).find('.hour'); var minute_

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

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

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

    本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下 首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给大家分享一个原生的方法吧,不会很难. 1.倒计时页面结构: <div class="secondkill"> <div class="top"> <span class="red fl">掌上秒杀</span

  • PHP+JS实现的商品秒杀倒计时用法示例

    本文实例讲述了PHP+JS实现的商品秒杀倒计时用法.分享给大家供大家参考,具体如下: <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2016-3-29 8:10:00"; $endtimestr = "2016-

  • javascript时间排序算法实现活动秒杀倒计时效果

    制做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页面的dom效果,可是再看了两遍发现可以, 于是我就改了改,实现了,先分享给大家. 页面需求是:从11点到20点 每隔一个小时一场秒杀 如果是当前时间就显示正在秒杀 之前的商品就往最后排 以此类推 类似最开始的11点顺序是 11,12,13,14,15,16,17,18,19,20(点): 到12点的顺序

随机推荐