网站活动秒杀倒计时
程序员文章站
2022-10-31 11:54:37
今天做移动端商城时候得，需要哥秒杀计时器，从后台获取了时间以后，前台做相应的判断。需要的可以直接拿去用，本人只精确到了x天x小时x分钟x秒。其他需要可以自行添加。
今天做移动端商城时候得，需要哥秒杀计时器，从后台获取了时间以后，前台做相应的判断。需要的可以直接拿去用，本人只精确到了x天x小时x分钟x秒。
其他需要可以自行添加。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.setting-time{
display: none;
}
.time{
width: 80%;
height: 100px;
margin: 0 auto;
background: black;
color: #fff;
display: flex;
justify-content: space-between;
}
.time span{
width:25%;
height: 100%;
font-size: 20px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<!--模拟后台取回来的数据，格式为30日12点0时0分，如需年月日，可以自己添加-->
<div class="setting-time">
<div class="last_d">30</div>
<div class="last_h">12</div>
<div class="last_f">0</div>
<div class="last_s">0</div>
</div>
<!--倒计时时间-->
<div class="time">
<span id="t_day"></span>
<span id="t_hour"></span>
<span id="t_minute"></span>
<span id="t_second"></span>
</div>
</body>
<script src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
function timeDown(){
//当前时间
var myDate = new Date();
var date=myDate.getDate()*24*60*60; //获取日期
var h=myDate.getHours()*60*60; //获取当前小时数(0-23)
var m=myDate.getMinutes()*60; //获取当前分钟数(0-59)
var s=myDate.getSeconds()*1; //获取当前秒
var now=date+h+m+s;//当前时间总秒数
//后台设置时间
var day2=$(".last_d").text()*24*60*60; //获取设置的天 比如28日
var xs=$(".last_h").text()*60*60; //获取设置的小时
var fz=$(".last_f").text()*60; //获取设置的分钟
var mz=$(".last_s").text()*1; //获取设置的秒
var last=day2+xs+fz+mz; //后台设置时间的总秒数
var limit_time=last-now; //计算差
var day=Math.floor(limit_time/60/60/24); //换算成正常日期
var hour=Math.floor(limit_time/60/60%24);
var minutes=Math.floor(limit_time/60%60);
var seconds=Math.floor(limit_time%60);
$("#t_day").html(day+"天"); /*写到页面中*/
$("#t_hour").html(hour+"时");
$("#t_minute").html(minutes+"分");
$("#t_second").html(seconds+"秒");
if(limit_time==10){
alert("提醒，还有10秒结束");
}
--limit_time;
window.name=limit_time;//记录当前时间。
}
timer=setInterval("timeDown()",1000);//设置定时器，1秒钟执行一次timeDown()函数；
</script>
</html>
上一篇： 通讯录
下一篇： 点击label执行两次的bug