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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
js prototype和__proto__的关系是什么
Aug 23 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
Angular实现form自动布局
2016/01/28 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python内置类型性能分析过程实例
2020/01/29 Python
django有哪些好处和优点
2020/09/01 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
应届生服务员求职信
2013/10/31 职场文书
美容院考勤制度
2014/01/30 职场文书
关于旅游的活动方案
2014/08/15 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
稽核岗位职责
2015/02/10 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
责任书格式
2019/04/18 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Java实现聊天机器人完善版
2021/07/04 Java/Android
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript