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 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
JS实现的抛物线运动效果示例
Jan 30 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
js实现有趣的倒计时效果
Jan 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
桌面中心(四)数据显示
2006/10/09 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
php依赖注入知识点详解
2019/09/23 PHP
php use和include区别总结
2019/10/13 PHP
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
浅析node.js中close事件
2014/11/26 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python实现电子产品商店
2019/02/26 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python 实用工具状态机transitions
2020/11/21 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
护理专业推荐信
2013/11/07 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
大学生入党自荐书
2015/03/05 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS