JS实现秒杀倒计时特效

本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下

知识点

添加一个定时器,对时间标签不断进行更新设置即可。
引入工具库工具库

运行效果

代码

引入MyTool.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      font-size: 30px;
    }
    span{
      background-color: #000;
      color: #fff;
      border-radius: 10px;
      padding: 0 5px;
    }
  </style>
</head>
<body>
<div id="box">
  <span>00</span>:<span>00</span>:<span>00</span>
</div>
<script src="../00MyTools/MyTools.js"></script>
<script>
  window.addEventListener('load',function (ev) {
    var hour = myTool.$('box').children[0], min = myTool.$('box').children[1], sec = myTool.$('box').children[2];
    var time = 8 * 60 * 60;
    var timer = setInterval(function () {
      time--;
      hour.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).hour);
      min.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).min);
      sec.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).second);
      if (time===0){
        clearInterval(timer);
      }
    },1000);
  },false);
</script>
</body>
</html>

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

(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

  • js实现倒计时秒杀效果

    实际项目中,需求一个倒计时秒杀功能,每天下午6点后,计算距离第二天上午10点的小时.分钟.秒数,计时到第二天上午10点后开启抢购功能:代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.1.min.js"></script&g

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

    本文实例讲述了JS秒杀倒计时功能.分享给大家供大家参考,具体如下: 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="miaosha();"> <p class="tit_right" style="

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

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

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

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

  • JavaScript实现秒杀时钟倒计时

    本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码,供大家参考,具体内容如下 功能介绍: 1.时/分/秒倒计时直至为零 所有代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <style type="text/css"> *{ margin:0; padding:

  • JS实现商城秒杀倒计时功能(动态设置秒杀时间)

    一年一度的双十二如期而至,今天的你买买买了吗,下面小编给大家分享一个动态秒杀倒计时功能. 效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="noStart">活动未开始</div> <div clas

  • 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实现商品秒杀倒计时(时间与服务器时间同步)

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

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

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

随机推荐