JavaScript实现限时秒杀功能

2024-12-17 10:08:17

本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <div class="box">
   <div id="d"></div>  <!-- 剩余的天数 -->
   <div id="h"></div>  <!-- 剩余的小时 -->
   <div id="m"></div>  <!-- 剩余的分钟 -->
   <div id="s"></div>  <!-- 剩余的秒数 -->
  </div>
  <script>
   //设置秒杀结束时间
   var endTime = new Date('2021-10-22 18:51:59'),endSeconds = endTime.getTime();
   //定义变量保存剩余的时间
   var d = h = m = s = 0;
   //设置定时器，实现限时秒杀效果
   var id = setInterval(seckill,1000);
   function seckill(){
    var nowTime = new Date(); //获取当前时间
     //获取时间差，单位为秒
     var remaining = parseInt((endSeconds - nowTime.getTime())/1000);
     if(remaining>0){//判断秒杀是否过期
     //计算剩余天数（除以60*60*24取整，获取剩余的天数）
      d=parseInt(remaining / 86400);
      //计算剩余小时（除以60*60转换为小时，与24小时取模，获取剩余的小时）
      h=parseInt((remaining / 3600) % 24);
      //计算剩余分钟（除以60转为分钟，与60取模，获取剩余的分钟）
      m=parseInt((remaining / 60) % 60);
      //计算剩余秒（与60取模，获取剩余的秒数）
      s=parseInt(remaining % 60);
      //统一利用两位数表示剩余的天、小时、分钟、秒
      d = d<10 ? '0' + d : d;
      h = h<10 ? '0' + h : h;
      m = m<10 ? '0' + m : m;
      s = s<10 ? '0' + s : s;
     }else{
      clearInterval(id);//秒杀过期，取消定时器
      d = h = m = s ='00';
     }
     //将剩余的天，小时，分钟和秒显示到指定的网页中
     document.getElementById('d').innerHTML = d + '天';
     document.getElementById('h').innerHTML = h + '时';
     document.getElementById('m').innerHTML = m + '分';
     document.getElementById('s').innerHTML = s + '秒';
   }
  </script>
 </body>
</html>

再为大家分享一个JS实现简单的限时秒杀案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .product{  border: 3px solid orange; display: inline-block; margin-left: 400px; width: 400px;  }
        .red{  color: red; font-size: 25px;  }
    </style>
</head>
<body>

<div class="product" style="text-align: center;">
    <img src="jquery案例-百叶窗/images/0.jpg" alt="" width="150"/>
    <p>绝世好男人</p>
    <span>原价：<del>99亿</del></span>
    <br/>
    <span>现价：<span class="red">100块</span></span>
    <br/>
    <span>距离抢购结束还有：</span><span id="time"></span>
</div>

<script>

    var stopTime = new Date(3000,11,14,0,0,0);
    var nowTime = new Date();
    var jianGe = (stopTime-nowTime)/1000;

    var day = Math.floor(jianGe/60/60/24);
    var hour = Math.floor(jianGe/60/60%24);
    var min = Math.floor(jianGe/60%60);
    var sec = Math.floor(jianGe%60);
    var showTime = day+'天'+hour+'小时'+min+'分钟'+sec+'秒';
    document.getElementById('time').innerText = showTime;

    //定时器：每隔多长事件执行一次某函数
    //setInterval(func,ms)
    var timer = setInterval(function () {

        var nowTime = new Date();
        var jianGe = (stopTime-nowTime)/1000;

        var day = Math.floor(jianGe/60/60/24);
        var hour = Math.floor(jianGe/60/60%24);
        var min = Math.floor(jianGe/60%60);
        var sec = Math.floor(jianGe%60);

        var showTime = day+'天'+hour+'小时'+min+'分钟'+sec+'秒';

        document.getElementById('time').innerText = showTime;

        if(day==0&&hour==0&&min==0&&sec==0){
            //关闭定时器
            clearInterval(timer);
        }

    },1000);

</script>

</body>
</html>

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

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 实现秒杀,团购倒计时展示的记录分享

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

本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下知识点添加一个定时器,对时间标签不断进行更新设置即可. 引入工具库工具库运行效果代码引入MyTool.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div
JavaScript仿京东秒杀倒计时

本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码,供大家参考,具体内容如下仿京东秒杀倒计时 html代码 <div id="box"> <div class="txt">秒杀倒计时</div> <div class="hour"></div>  <span class="h_m">:&l
Docker + Nodejs + Kafka + Redis + MySQL搭建简单秒杀环境

秒杀活动可以说在互联网上随处可见,从12306抢票,到聚划算抢购,我们生活的方方面面都可以看到秒杀的身影.秒杀的架构设计也是对于一个架构师架构设计能力的一次考验.本文的目的并不在于提供一个可以直接落地的设计方案,而是意在提供一个简单的方法,一个思路,使大家能够对于秒杀背后的一些设计有更感性的认识, 并且可以自己亲自动手实践一下.所有的配置及源码都在本文最后的GitHub repository中可以找到. 首先,先简单介绍下本文中会涉及到的一些组件,如下图所示: JMeter:用JMeter来模拟
JS实现商城秒杀倒计时功能(动态设置秒杀时间)

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

倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 GIF 1.制作测试网页首先我们来做一个简易的抢购页面 <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Apple</title> <style type=&q
JS脚本实现网页自动秒杀点击

我们先来看下秒杀活动页面代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> Micomo </title> </head> <body> <div> <p> 活动倒计时<str
js实现京东秒杀倒计时功能

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

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

JavaScript实现限时秒杀功能

相关推荐

随机推荐