仿京东秒杀倒计时 JS[代码+详细讲解+效果图]

仿京东秒杀倒计时 BOM知识点[代码+详细讲解+效果图]

心态还需努力呀

5229人浏览 · 2022-05-04 07:15:00

心态还需努力呀 · 2022-05-04 07:15:00 发布

文章目录

前言
一、html代码讲解
二、css代码讲解
三、js代码讲解
四、全部代码
五、效果图
总结

前言

这个倒计时秒杀效果可以直接拿来用，不需要具备自己能够打出来。当然了，要是能打出来那是最好的，理解代码的意思就可以了。。。重点在于bom的知识点那块，也就是setInterval的使用。下面详细讲解一下吧。

一、html代码讲解

在做这个时，我们先把京东的图拿过来分析一下。下图是京东的秒杀效果图。主要是一个大的div放背景图。里面有3个小的div。最后一个div里面放3个span标签进行修饰。下面我们来一起做吧！

按照上面的思路我们写一下代码，这个简单就不多说了。

        <div class="big_box">
			<div class="box1">
				京东秒杀
			</div>
			<div class="box2">
				24:00点场 距结束
			</div>
			<div class="box3">
				<span class="hour">1</span>&nbsp;:&nbsp;
				<span class="minute">2</span>&nbsp;:&nbsp;
				<span class="second">3</span>&nbsp;&nbsp;
			</div>
		</div>

二、css代码讲解

分析

因为里面的3个小div需要设置所在大盒子的位置。所以我们先设置大div

1.设置相对属性

2.设置宽高

3.设置背景图。(图片自己想做的话去京东下载吧)

大盒子代码

            .big_box {
				position: relative;
				width: 190px;
				height: 250px;
				background: url(../../img/jd.png) no-repeat;
			}

设置三个小div相同的属性，写在一起。

1.相同的颜色

2.相同的粗体

3.都要调位置

相同属性代码

            .big_box .box1,.box2,.box3 {
				color: #FFFFFF;
				font-weight: 700;
				position: absolute;
			}

设置三个小div的不同属性，div位置，字体大小。

不同属性代码

            /* div位置，字体大小 */
			.big_box .box1 {
				font-size: 30px;
				top: 30px;
				left: 32px;
			}
			/* div位置，字体大小 */
			.big_box .box2 {
				font-size: 18px;
				top: 164px;
				left: 24px;
			}
			/* div位置，字体大小 */
			.big_box .box3{
				font-size: 20px;
				top: 203px;
				left: 32px;
			}

设置第三个div里面三个span标签的属性

修饰span代码

            /* span */
			.hour,.minute,.second {
				display:inline-block;
				width: 26px;
				height: 26px;
				background-color: #000000;
			}

三、js代码讲解

获取span时分秒代码

这里只有第三个div里的3个span标签需要变化，所以获取过来。

            var hour=document.querySelector('.hour');
			var minute=document.querySelector('.minute');
			var second=document.querySelector('.second');

结束时间代码

var inputTime=+new Date('2022-5-3 24:00:00');

获取时分秒时间并把值放到span里代码

这个在我前几篇javascript中Date()内置对象说过，这里就不解释了。

            function countDown(){
				var nowTime=+new Date();
				var times=(inputTime-nowTime)/1000;
				var h=parseInt(times/60/60%24);
				h=h<10 ? '0'+h:h;
				hour.innerHTML=h;
				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;
			}

隔一秒调用一次函数代码

这个就是每秒执行函数获取值不同，显示的也会相应的变化。setInterval（函数名，毫秒数），所以每隔一秒就会执行一次函数。

window.setInterval(countDown,1000);

注意：防止第一次有空白需在没执行上述的setInterval时先调用一次。

countDown();//先调用一次 防止第一次刷新有空白

四、全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big_box {
				position: relative;
				width: 190px;
				height: 250px;
				background: url(../../img/jd.png) no-repeat;
			}
			/* 相同的属性 */
			.big_box .box1,.box2,.box3 {
				color: #FFFFFF;
				font-weight: 700;
				position: absolute;
			}
			/* div位置，字体大小 */
			.big_box .box1 {
				font-size: 30px;
				top: 30px;
				left: 32px;
			}
			/* div位置，字体大小 */
			.big_box .box2 {
				font-size: 18px;
				top: 164px;
				left: 24px;
			}
			/* div位置，字体大小 */
			.big_box .box3{
				font-size: 20px;
				top: 203px;
				left: 32px;
			}
			/* span */
			.hour,.minute,.second {
				display:inline-block;
				width: 26px;
				height: 26px;
				background-color: #000000;
			}
			
		</style>
	</head>
	<body>
		<div class="big_box">
			<div class="box1">
				京东秒杀
			</div>
			<div class="box2">
				24:00点场 距结束
			</div>
			<div class="box3">
				<span class="hour">1</span>&nbsp;:&nbsp;
				<span class="minute">2</span>&nbsp;:&nbsp;
				<span class="second">3</span>&nbsp;&nbsp;
			</div>
		</div>
		<script type="text/javascript">
			var hour=document.querySelector('.hour');
			var minute=document.querySelector('.minute');
			var second=document.querySelector('.second');
			var inputTime=+new Date('2022-5-3 24:00:00');
			countDown();//先调用一次 防止第一次刷新有空白
			window.setInterval(countDown,1000);
			function countDown(){
				var nowTime=+new Date();
				var times=(inputTime-nowTime)/1000;
				var h=parseInt(times/60/60%24);
				h=h<10 ? '0'+h:h;
				hour.innerHTML=h;
				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>
	</body>
</html>