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 ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
angularJS中router的使用指南
Feb 09 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
JavaScript门道之标准库
May 26 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
vue 自定义组件的写法与用法详解
Mar 04 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 while循环控制的简单实例
2016/05/30 PHP
python进程与线程小结实例分析
2018/11/11 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
vue.js todolist实现代码
2017/10/29 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
python 异或加密字符串的实例
2018/10/14 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python实现直播推流效果
2019/11/26 Python
解决python运行启动报错问题
2020/06/01 Python
零基础小白多久能学会python
2020/06/22 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
秋季运动会广播稿
2014/02/22 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
作风建设整改方案
2014/10/27 职场文书
读书笔记怎么写
2015/07/01 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
话题作文之诚信
2019/11/28 职场文书