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 相关文章推荐
巧用replace将文字表情替换为图片
Apr 17 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Javascript执行流程细节原理解析
May 14 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Javascript中的数学函数
2007/04/04 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python文件操作相关知识点总结整理
2016/02/22 Python
理解python中生成器用法
2017/12/20 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python+requests接口自动化框架的实现
2020/08/31 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
外科实习自我鉴定
2013/10/06 职场文书
火箭队口号
2014/06/18 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
2014年环卫工作总结
2014/11/22 职场文书
先进党支部事迹材料
2014/12/24 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers