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

js实现倒计时秒杀效果

 更新时间：2020年03月25日 14:22:46   作者：菜菜无涯  
这篇文章主要为大家详细介绍了js实现倒计时秒杀效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

实际项目中，需求一个倒计时秒杀功能，每天下午6点后，计算距离第二天上午10点的小时、分钟、秒数，计时到第二天上午10点后开启抢购功能；代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="js/jquery-1.11.1.min.js"></script>
 </head>
 <body οnlοad="leftTimer();">
 <p class="tit_right" style="">
 <span id="h" style="">00</span>
 <span id="m" style="">00</span>
 <span id="s" style="">00</span>
 </p>
 <p style="" id="juli"></p>
<script>    
 function leftTimer(year,month,day,hour,minute,second){ 
 var newDate = new Date();
 var newDate1 = new Date(year,month-1,day,hour,minute,second);
 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数 
 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) {
  $(".tit_right").css('display', 'none');
  $("#juli").text("开始抢购");
 } 
 else{
  days = fix(days,2); 
  hours = fix(hours,2); 
  minutes = fix(minutes,2); 
  seconds = fix(seconds,2); 
 setTimeout("leftTimer(2017,2,21,11,0,0)",1000); 
 document.getElementById("h").innerHTML=hours;
 document.getElementB
 
 
 yId("m").innerHTML=minutes;
 document.getElementById("s").innerHTML=seconds;
 }
 }
 //fix函数：将1~9的1位数转换成01~09的格式
 function fix(num, length) {
  return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
 }
</script>
</body>
</html>

以上，在leftTimer() 函数里传参，参数为指定的日期和时间，计时就开启了！

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

您可能感兴趣的文章:

相关文章

  • 一文掌握new Date() 方法

    一文掌握new Date() 方法

    大家平时在开发的时候有没被new Date()折磨过，反正我是踩过很多坑，今天小编通过本文给大家详细讲解下new date()方法应用思考，感兴趣的朋友一起看看吧
    2023-04-04
  • JavaScript和Vue分别实现逐字弹出(打字机)效果

    JavaScript和Vue分别实现逐字弹出(打字机)效果

    这篇文章主要为大家详细介绍了如何通过CSS、JavaScript和Vue分别实现逐字弹出(打字机)效果,文中的示例代码讲解详细,需要的小伙伴可以参考一下
    2024-01-01
  • JavaScript中的变量提升和函数提升

    JavaScript中的变量提升和函数提升

    这篇文章主要介绍了JavaScript中的变量提升和函数提升，在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功能
    2022-07-07
  • 微信小程序自定义tabbar栏实现过程讲解

    微信小程序自定义tabbar栏实现过程讲解

    tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 前端使用JS内置Blob实现下载各种形式的文件实例

    前端使用JS内置Blob实现下载各种形式的文件实例

    通过使用JavaScript我们可以很方便地实现文件的下载功能,这篇文章主要给大家介绍了关于前端使用JS内置Blob实现下载各种形式文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • xmlplus组件设计系列之分隔框（DividedBox)（8）

    xmlplus组件设计系列之分隔框（DividedBox)（8）

    xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus布局类组件之分隔框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • layui2.0使用table+laypage实现真分页

    layui2.0使用table+laypage实现真分页

    这篇文章主要为大家详细介绍了layui2.0使用table+laypage实现真分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js获取某月的最后一天日期的简单实例

    js获取某月的最后一天日期的简单实例

    js获取某月的最后一天日期的简单实例，需要的朋友可以参考一下
    2013-06-06
  • TypeScript在Vuex4中使用TS实战分享

    TypeScript在Vuex4中使用TS实战分享

    这篇文章主要介绍了TypeScript在Vuex4中使用TS实战分享，vuex4类型 Api分析和vuex4实战两部分讲述，需要的小伙伴可以参考一下
    2022-06-06
  • 简体中文转换繁体中文(实现代码)

    简体中文转换繁体中文(实现代码)

    本篇文章主要是对简体中文转换繁体中文的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12

最新评论