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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
php正则表达式学习笔记
2015/11/13 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
PHP中SESSION过期设置
2021/03/09 PHP
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
js仿微信抢红包功能
2020/09/25 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
vue-router传参用法详解
2019/01/19 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python+opencv实现车道线检测
2021/02/19 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
财产保全担保书
2015/01/20 职场文书
同学聚会邀请函
2015/01/30 职场文书
研究生个人学年总结
2015/02/14 职场文书
离婚案件上诉状
2015/05/23 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记