JavaScript定时器-限时秒杀

绝地灬酷狼 2022-12-26 08:20 68阅读 0赞

文件index.html

##### 代码 #####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="GBK" />
    		<title>show</title>
    		<link rel="stylesheet" href="css/index.css" type="text/css" />
    		
    	</head>
    	<body>
    		
    		<div class="divMain">
    			<img src="img/secondBuyImg.jpg" id="imgMain" />
    			<h3 style="color: #FF0000;">距离本厂秒杀结束还剩:</h3>
    			<div id="divSecond">
    				
    				<div id="divF1" class="divFours">
    					<font class="fontdate" size="4" id="font1">00</font>
    					<font class="fonttext" size="4">天</font>
    				</div>
    				<div id="divF2" class="divFours">
    					<font class="fontdate" size="4" id="font2">00</font>
    					<font class="fonttext" size="4">时</font>
    				</div>
    				<div id="divF3" class="divFours">
    					<font class="fontdate" size="4" id="font3">00</font>
    					<font class="fonttext" size="4">分</font>
    				</div>
    				<div id="divF4" class="divFours">
    					<font class="fontdate" size="4" id="font4">00</font>
    					<font class="fonttext" size="4">秒</font>
    				</div>
    			</div>
    		</div>
    		
    	</body>
    </html>
    <script type="text/javascript" src="js/index.js"></script>

#### 样式表文件index.css ####

#imgMain{
        
    	
    }
    .divMain{
        /*外层div*/
    width: 100%;
    height: 100%;
    	display: flex;
    	justify-content: left;
    	align-items: center;/*位于弹性盒子垂直方向的中心*/
    	flex-direction: column;/*设置弹性盒子排序方向*/
    }
    /* 外层时间div */
    #divSecond{
        
    	width: 500px;
    	height: 500px;
    	display: flex;
    	justify-content: center;
    	align-items: flex-start;
    	flex-direction: row;
    }
    .divFours{
        /*时间div1-4*/
    	width: 10%;
    	height: 10%;
    	border: 2px solid red;
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    }
    /* 图片外层div */
    #divFrist{
        
    	width: 20%;
    }
    /* 剩余时间显示 */
    .fontdate{
        
    	color: deeppink;
    }
    .fonttext{
        
    	color: darkblue;
    }

#### JavaScript文件index.js ####

function torun(str){
    	
    	var date=new Date();
    	var systemDay=date.getDate();
    	var systemHour=date.getHours();
    	var systemMinute=date.getMinutes();
    	var systemSecond=date.getSeconds();
    	
    	var endDate=new Date(str);
    	var endDay=endDate.getDate();
    	var endHour=endDate.getHours();
    	var endMinute=endDate.getMinutes();
    	var endSecond=endDate.getSeconds();
    	
    	var remainingDay=-(systemDay-endDay)-1;
    	var remainingHour=-(systemHour-endHour)-1;
    	var remainingMinute=-(systemMinute-endMinute)-1;
    	var remainingSecond=(systemSecond-endSecond>=0)?systemSecond-endSecond+59:-(systemSecond-endSecond)-1;
    	
    	
    	console.log("剩余"+remainingDay+"天");
    	console.log("剩余"+remainingHour+"时");
    	console.log("剩余"+remainingMinute+"分");
    	console.log("剩余"+remainingSecond+"秒");
    	
    	console.log("当前天"+systemDay+"结束天"+endDay);
    	console.log("当前时"+systemHour+"结束时"+endHour);
    	console.log("当前分"+systemMinute+"结束分"+endMinute);
    	console.log("当前秒"+systemSecond+"结束秒"+endSecond);
    	
    	document.getElementById("font1").innerText=remainingDay+"";
    	document.getElementById("font2").innerText=remainingHour+"";
    	document.getElementById("font3").innerText=remainingMinute+"";
    	document.getElementById("font4").innerText=remainingSecond+"";
    	
    }
    var int=setInterval('torun("2020-12-5 23:59:59")',60);

#### 目录 ####

![目录][20201203211017589.PNG_pic_left]

#### 效果 ####

![浏览效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0MzY3Ng_size_16_color_FFFFFF_t_70_pic_center]

[20201203211017589.PNG_pic_left]: /images/20221120/53770d4f88d54d38b26c1f976235bccc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0MzY3Ng_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201203211250275.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0MzY3Ng==,size_16,color_FFFFFF,t_70#pic_center