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常见表单应用技巧
Jan 09 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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
php常用字符串处理函数实例分析
2014/11/22 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
面试常见的js算法题
2017/03/23 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python 如何快速复制序列
2020/09/07 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
酒店led欢迎词
2014/01/09 职场文书
质量保证书范本
2014/04/29 职场文书
应届生求职自荐信
2014/07/04 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2014年市场部工作总结
2014/11/25 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript