秒杀倒计时

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<div class="content3">

<div class="time">还剩 <span id="LeftTime"></span></div>

</div>

</body>

</html>

<script>

function FreshTime(){

var endtime=new Date("2019/6/2,12:20:12");//结束时间

var nowtime = new Date();//当前时间

var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);

d=parseInt(lefttime/3600/24);

h=parseInt((lefttime/3600)%24);

m=parseInt((lefttime/60)%60);

s=parseInt(lefttime%60);

document.getElementById("LeftTime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";

if(lefttime<=0){

document.getElementById("LeftTime").innerHTML="活动已结束";

clearInterval(sh);

}

}

FreshTime()

var sh;

sh=setInterval(FreshTime,1000);

</script>

 

----------------------------------------------------------------------------------------------------------------------------

直接用

<body>

<div class="content3">

<div class="time">还剩 <span id="LeftTime"></span></div>

</div>

<script>

function FreshTime()

{

var endtime=new Date("2019/7/15,12:20:12");//结束时间

var nowtime = new Date();//当前时间

var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);

d=parseInt(lefttime/3600/24);

h=parseInt((lefttime/3600)%24);

m=parseInt((lefttime/60)%60);

s=parseInt(lefttime%60);

document.getElementById("LeftTime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";

if(lefttime<=0){

document.getElementById("LeftTime").innerHTML="团购已结束";

clearInterval(sh);

}

}

FreshTime()

var sh;

sh=setInterval(FreshTime,1000);

</script>

 

详解

 

// 后台的时间怎么来的: 使用未来的时间 假设今天中午12点 和 一个当前2018年12月8日10:47:48

// 用未来时间-当前的时间 求到时间差 作为一个总秒数返回给前端

//获取未来的时间

// var fetureTime = new Date("12 8,2018 12:00:00");

// 注意如果使用数字传参 月份0-11 减1月 调用getTime()函数把时间转成毫秒数 1970.1.1 00:00:00-当前指定时间的时间差的毫秒数

var futureTime = new Date(2018, 11, 8, 14, 49, 00).getTime();

console.log(futureTime);

//获取当前时间

var nowTime = new Date().getTime();

console.log(nowTime);

// 因为使用fetureTime-nowTime默认转成毫秒数来相减 减完后默认 是毫秒数 求秒数 / 1000 求到秒 向下取整

console.log(futureTime - nowTime);

// 1. 定义一个总时间 2小时 1个小时60分钟 1 分钟是60秒 2小时就是7200秒 (从后台获取)

var time = Math.floor((futureTime - nowTime) / 1000);

// 3. 获取所有的span元素

var spans = document.querySelectorAll('.seckill-time span');

console.log(time);

// 倒计时功能

// 1. 需要有一个总的倒计时的事件(请求数据 后台返回回来的)

// 2. 把事件作为时分秒的形式显示给用户 每个一秒 总时间--

function downTime() {

// 2. 求到总时间的时分秒

// 1. 小时 1个小时60分钟 1 分钟 60秒 1个小时 = 60*60 == 3600 总时间/3600

var hour = time / 3600;

// console.log(hour);

// 2. 分钟 1分钟60秒但是要把小时部分去掉 time % 3600 把小时部分去掉 然后1分钟60 总秒数 % 3600 / 60 == 分钟数

var minute = time % 3600 / 60;

// console.log(minute);

// 3. 秒数 只要60秒以内都是秒数 总时间 % 60

var second = time % 60;

// console.log(second);

// 4. 把时分秒分别显示到对应的span里面 分别求出十位和个位 向下取整 十位 / 10 个位 % 10

spans[0].innerHTML = Math.floor(hour / 10);

spans[1].innerHTML = Math.floor(hour % 10);

spans[3].innerHTML = Math.floor(minute / 10);

spans[4].innerHTML = Math.floor(minute % 10);

spans[6].innerHTML = Math.floor(second / 10);

spans[7].innerHTML = Math.floor(second % 10);

}

if (time <= 0) {

time = 7200;

}

downTime();

// 5. 定义一个定时器 让总时间每隔1秒--

var timeId = setInterval(function() {

// 6. 让总时间在定时器里面每隔1秒--

time--;

if (time <= 0) {

time = 7200;

// 倒计时已经到了就清除定时器

// clearInterval(timeId);

// 7. 时间--完后重新计算--完后的时分秒设置到页面上

downTime();

// 跳转到秒杀商品页面

} else {

downTime();

}

}, 1000);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值