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 JSON实现无刷新三级联动实例探讨
May 28 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
原生js实现吸顶效果
Mar 13 Javascript
webpack优化的深入理解
Dec 10 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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之第八天
2006/10/09 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python实战教程之自动扫雷
2018/07/13 Python
Python基于百度云文字识别API
2018/12/13 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
基于python 取余问题(%)详解
2020/06/03 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
市场营销专业应届生自荐信
2014/06/19 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014年建筑工作总结
2014/11/26 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers