js实现倒计时秒杀效果
更新时间：2020年03月25日 14:22:46 作者：菜菜无涯
这篇文章主要为大家详细介绍了js实现倒计时秒杀效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实际项目中，需求一个倒计时秒杀功能，每天下午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() 函数里传参，参数为指定的日期和时间，计时就开启了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
js实现使用输入input和改变change事件模拟手动输入
聚焦于JavaScript中的输入模拟技术,本指南将带你探索如何使用input和change事件来创造逼真的手动输入效果,通过简单的代码实现,你将掌握这一实用的技巧,为你的Web应用增添交互的乐趣,需要的朋友可以参考下2024-03-03
javascript来定义类的规范，有利于代码的可阅读性。2010-11-11
如果我们有一份过去时间戳，如何使用JS/HTML将时间戳转换为“xx天前”的形式呢？很多朋友都觉得解决办法有点困难，其实很简单的，下面小编给大家分享完整的实现代码，一起看看吧2017-02-02
这篇文章主要介绍了Bootstrap组件学习之导航、标签、面包屑导航(精品)的相关资料,需要的朋友可以参考下2016-05-05
扩展IE中一些不兼容的方法如contains、startWith等等
扩展IE中一些不兼容的方法如contains方法、startWith方法等等，下面是具体的实现代码，喜欢的朋友可以参考下2014-01-01
这篇文章主要介绍了JavaScript数字和字符串转换的应用,需要的朋友可以参考下2014-03-03
从零开始做一个pagination分页组件，这篇文章主要介绍了pagination分页组件的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
本文为大家介绍下使用js判断字符长度及中英文数字等，下面有个不错的教程，感兴趣的朋友可以参考下2013-12-12
这篇文章主要介绍了js使用栈来实现10进制转8进制、js取除数、余数,需要的朋友可以参考下2014-06-06
这篇文章主要为大家详细介绍了小程序实现下拉列表框菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论