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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
JavaScript实现图片放大预览效果
Nov 02 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代码(星期六,星期日总和)
2009/11/12 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
php实现微信发红包
2015/12/05 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP 图片处理
2020/09/16 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
详解vue路由
2020/08/05 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python多线程扫描端口示例
2014/01/16 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
你真的了解Python的random模块吗?
2017/12/12 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
开业典礼致辞
2015/07/29 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书