JS 模仿京东秒杀倒计时

我不是女神ヾ 2023-10-05 08:23 21阅读 0赞

#### 使用定时器 ####

![20200814113635288.png][]

#### 页面： ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.box{
    				height: 300px;
    				width: 200px;
    				background-color: red;
    			}
    			.box2{
    				padding-top: 10px;
    			}
    			h2{
    				color: white;
    				text-align: center;
    			}
    			img{
    				margin-left: 70px;
    			}
    			p{
    				color: white;
    				text-align: center;
    			}
    			li{
    				font-family: "微软雅黑";
    			    font-size:20px;
    				margin-left: 5px;
    				list-style: none;
    				display: inline-block;
    			}
    			li:nth-child(odd){
    				background-color: black;
    				color: white;
    			}
    			li:nth-child(even){
    				color: white;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    		<div class="box2">
    		 <h2>京东秒杀</h2>	
    			<img src="img/jd.PNG">
    		<p>16:00点场倒计时</p>
    			<ul>
    				<li id="hh">16</li>
    				<li>:</li>
    				<li id="mm">10</li>
    				<li>:</li>
    				<li id="ss">00</li>
    			</ul>
    		</div>
    	</body>
    </html>
    
    <script src="js/lzl.js" type="text/javascript" charset="utf-8"></script>

#### JS： ####

[20200814113635288.png]: https://img-blog.csdnimg.cn/20200814113635288.png