京东秒杀效果的实现

最新推荐文章于 2023-06-29 21:31:42 发布

高shan仰止

最新推荐文章于 2023-06-29 21:31:42 发布

阅读量1.3k

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/Gaoshanyz/article/details/109090014

版权

大家好，今天我给大家分享的是：京东页面倒计时效果的代码，利用计时器用js实现，下面一起看看代码吧！

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

#box {

width: 200px;

height: 300px;

margin: 200px 200px;

background: red;

position: relative;

}

.txt {

width: 150px;

height: 50px;

text-align: center;

line-height: 50px;

color: #fff;

font-size: 30px;

font-weight: 900;

position: absolute;

left: 25px;

top: 50px;

}

.hour {

left: 20px;

}

.h_m {

left: 68px;

}

.minute {

left: 80px;

}

.m_s {

right: 68px;

}

.second {

left: 140px;

}

.hour,

.minute,

.second {

position: absolute;

top: 200px;

color: #fff;

font-weight: 800;

font-size: 20px;

text-align: center;

line-height: 40px;

width: 40px;

height: 40px;

background: black;

}

.h_m,

.m_s {

color: #fff;

font-size: 20px;

font-weight: 900;

position: absolute;

bottom: 70px;

}

.words {

margin-top: 160px;

font-size: 18px;

color: white;

margin-left: 20px;

text-align: center;

position: absolute;

}

</style>

</head>

<body>

<div class="words"><strong>22:00</strong> 点场倒计时</div>

</div>

</body>

//1、获取元素

var hour = document.querySelector(".hour");

var minute = document.querySelector(".minute");

var second = document.querySelector(".second");

var inputTime = +new Date("2020-9-27 18:00:00");//倒计时的结束时间，自己设置时间

countDown();//先调用一次这个函数防止第一次刷新页面有空白

//2、开启定时器

setInterval(countDown, 1000);//1000毫秒，每一秒钟调用一次函数

//3、倒计时-时分秒函数

function countDown() {

var nowTime = +new Date(); //返回的是当前时间的总的毫秒数

var times = (inputTime - nowTime) / 1000; // times是剩余时间的总的毫秒数

var h = parseInt(times / 60 / 60 % 24);

h = h < 10 ? "0"+h : h;//判断数值小于10的情况如 0-9改为 00-09

hour.innerHTML = h;//更改div里面的内容把h给获取元素hour的内容

var m = parseInt(times / 60 % 60);

m = m < 10 ? "0"+m : m;

minute.innerHTML = m;//同上

var s = parseInt(times % 60);

s = s < 10 ? "0"+s : s;

second.innerHTML = s;//同上

}

</script>

</html>

高shan仰止

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
京东秒杀效果的实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{margin:0...
复制链接

扫一扫