脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js限时秒杀

JavaScript实现限时秒杀功能

 更新时间：2021年08月26日 08:45:22   作者：layroy  
各种电商活动都喜换选择限时秒杀活动形式，这篇文章主要为大家详细介绍了JavaScript实现限时秒杀功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

您可能感兴趣的文章:

相关文章

  • JS信息收集代码研究(获取客户端的浏览器、cpu等软硬件信息)

    JS信息收集代码研究(获取客户端的浏览器、cpu等软硬件信息)

    听朋友说，这段JavaScript信息收集代码主要用于收集IP......等等什么的，用来研究,需要的朋友可以参考一下
    2023-06-06
  • js 提取class相同的节点集合

    js 提取class相同的节点集合

    可以获取网页中相同class的节点的脚本，然后就可以统一做一些调整。
    2008-12-12
  • TypeScript命名空间讲解

    TypeScript命名空间讲解

    这篇文章主要介绍了TypeScript命名空间，TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。由微软开发的自由和开源的编程语言。设计目标是开发大型应用，它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上,下面来看详细内容吧

    2021-12-12
  • 使用JavaScript和MQTT开发物联网应用示例解析

    使用JavaScript和MQTT开发物联网应用示例解析

    这篇文章主要介绍了使用JavaScript和MQTT开发物联网应用示例解析，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JavaScript实现多维数组的方法

    JavaScript实现多维数组的方法

    这篇文章主要介绍了JavaScript实现多维数组的方法，有需要的朋友可以参考一下
    2013-11-11
  • 不错的新闻标题颜色效果

    不错的新闻标题颜色效果

    [红色]不错的新闻标题颜色效果...
    2006-12-12
  • 利用JS自动打开页面上链接的实现代码

    利用JS自动打开页面上链接的实现代码

    今天经过测试，实现了利用JS来自动打开页面上的链接的功能，其实比较简单，就是在页面上把链接列表列出来，然后通过JQuery的相关控制，在框架页中把链接打开，具体能做什么用，大家自己想，哈哈。
    2011-09-09
  • JavaScript的查询机制LHS和RHS解析

    JavaScript的查询机制LHS和RHS解析

    这篇文章主要介绍了JavaScript的查询机制LHS和RHS解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 基于Javascript实现弹出页面效果

    基于Javascript实现弹出页面效果

    弹出层效果是一个很实用的功能，很多网站都采用了这种方式实现登录和注册，下面小编通过本文给大家分享具体实现代码，对js弹出页面效果相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 微信小程序自定义模态对话框实例详解

    微信小程序自定义模态对话框实例详解

    这篇文章主要为大家详细介绍了微信小程序自定义模态对话框实例的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论