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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
JS严格模式原理与用法实例分析
Apr 27 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
搜索引擎技术核心揭密
2006/10/09 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python中格式化字符串的四种实现
2020/05/26 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
稽核岗位职责范本
2015/04/13 职场文书
培训通知书模板
2015/04/17 职场文书
人与自然的观后感
2015/06/18 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android