js实现倒计时秒杀效果


Posted in Javascript onMarch 25, 2020

实际项目中,需求一个倒计时秒杀功能,每天下午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() 函数里传参,参数为指定的日期和时间,计时就开启了!

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

Javascript 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
tab栏切换原理
Mar 22 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
vue el-table实现自定义表头
Dec 11 #Javascript
Vue如何获取数据列表展示
Dec 11 #Javascript
vue el-table实现行内编辑功能
Dec 11 #Javascript
Vue.js实现可编辑的表格
Dec 11 #Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 #Javascript
用JS实现一个简单的打砖块游戏
Dec 11 #Javascript
js消除图片小游戏代码
Dec 11 #Javascript
You might like
德生PL330测评
2021/03/02 无线电
一个PHP日历程序
2006/12/06 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python实现汇率转换操作
2020/05/03 Python
后勤自我鉴定
2013/10/13 职场文书
内容编辑个人求职信
2013/12/10 职场文书
总结表彰大会主持词
2014/03/26 职场文书
机关办公室岗位职责
2014/04/16 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
鉴史问廉观后感
2015/06/10 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
vue实现移动端div拖动效果
2022/03/03 Vue.js