脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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几个不错的函数 $$()

    js几个不错的函数 $$()

    js几个不错的函数 $$()...
    2006-10-10
  • 新版小程序登录授权的方法

    新版小程序登录授权的方法

    这篇文章主要介绍了新版小程序登录授权的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • js简单时间比较的方法

    js简单时间比较的方法

    这篇文章主要介绍了js简单时间比较的方法,通过2个自定义函数实现针对时间与日期的比较功能,涉及javascript日期及时间换算与比较操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • js获取对象的属性值两种方式

    js获取对象的属性值两种方式

    这篇文章主要介绍了js获取对象的属性值两种方式,在JavaScript中访问对象的属性值可以通过点运算符（.）或括号运算符（[]）两种方式,文中将两种方式的代码介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • Canvas实现微信红包照片效果

    Canvas实现微信红包照片效果

    这篇文章主要为大家详细介绍了Canvas实现微信红包照片效果，用canvas及css3结合，实现红包照片的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 微信小程序使用slider实现音频进度条

    微信小程序使用slider实现音频进度条

    这篇文章主要为大家详细介绍了微信小程序使用slider实现音频进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JS实现商品筛选功能

    JS实现商品筛选功能

    这篇文章主要为大家详细介绍了JS实现商品筛选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • event.keyCode键码值表 附只能输入特定的字符串代码

    event.keyCode键码值表 附只能输入特定的字符串代码

    非常不错的应用，让文本框里只能输入money大家看下具体的实现代码，真是只有想到，原理很简单。
    2009-05-05
  • layui实现图片虚拟路径上传,预览和删除的例子

    layui实现图片虚拟路径上传,预览和删除的例子

    今天小编就为大家分享一篇layui实现图片虚拟路径上传,预览和删除的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 分享十三个最佳JavaScript数据网格库

    分享十三个最佳JavaScript数据网格库

    数据网格可以帮助解决在 HTML 表格上对带有过滤、分页、排序、搜索以及内联编辑这些功能特性的大量数据集的处理问题,需要的朋友可以参考下
    2017-04-04

最新评论