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连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php使用正则验证中文
2016/04/06 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JS画线(实例代码)
2013/11/20 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python中base64加密解密方法实例分析
2015/05/16 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
详解【python】str与json类型转换
2019/04/29 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
怎样创建、运行java程序
2014/08/01 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
法学函授自我鉴定
2014/02/06 职场文书
岗位说明书标准范本
2014/07/30 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
节水宣传标语口号
2015/12/26 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python