js實現圖片時間,京東倒計時案例

html代碼

<div id="pic">
		    <img src="img/0.png" alt="" />
		    <img src="img/0.png" alt="" />
		    <span>時</span>
		    <img src="img/0.png" alt="" />
		    <img src="img/0.png" alt="" />
		    <span>分</span>
		    <img src="img/0.png" alt="" />
		    <img src="img/0.png" alt="" />
		    <span>秒</span>
		</div>

js代碼

<script type="text/javascript">
			 var imgid=document.getElementsByTagName("img");//？？？
			function foo(){
				//獲取當前時間
				var oDate = new Date();
				var h = oDate.getHours();
				var f = oDate.getMinutes();
				var m = oDate.getSeconds();
				var h1 = h>=10?h:"0"+h;  //保證都是由2位組成
        		var f1 = f>=10?f:"0"+f;
        		var m1 = m>=10?m:"0"+m;
				
				var times = String(h1)+String(f1)+String(m1);//拼接
				
				for (var i=0; i<imgid.length; i++){
             		imgid[i].src='img/'+times[i]+'.png';   //遍歷這個時間位數，並改變圖片的src屬性達到換圖片效果。
         		}	
			}
			setInterval(foo,1000);
		</script>

京東倒計時

css樣式

<style type="text/css">
			body,h1,span,input,img,ul,li{padding: 0;margin: 0;}
			#box{
				width: 200px;
				height: 300px;
				background: #e83736;
				margin: 0 auto;
			}
			ul,li{list-style: none;}
			h1{
				width: 200px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				color: #FFFFFF;
			}
			#cot{
				width:200px ;
				height:40px;
				font-size: 20px;
				color: #CECECE;
				text-align: center;
				line-height: 40px;
			}
			#imgs{
				width: 50px;
				height: 70px;
				margin: 0 auto;
				background: url(img/seckill.png) no-repeat -60px 0px;
				
			}
			span{
				width: 200px;
				height: 30px;
				display: block;
				color: #FFFFFF;
				text-align: center;
				font-size: 15px;
			}
			ul{
				width: 200px;
				padding-left: 10px;
			}
			li{
				width: 50px;
				height: 50px;
				float: left;
				margin: 10px 5px;
				background: #000000;
				color: #FFFFFF;
				font-size: 30px;
				color: #FFFFFF;
				text-align: center;
				line-height: 50px;
			}
		</style>

html佈局

<div id="box">
			<h1>倒計時</h1>
			<div id="cot">COUNT DOWN</div>
			<div id="imgs"></div>
			<span>距離結束還剩</span>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

js代碼

<script type="text/javascript">
			var oLi = document.querySelectorAll("li");
			function foo(){
				var oDate = new Date();//獲取當前日期
				var oDate1 = new Date("2019/8/5 12:00:00");//定義之後的日期
				var cha = oDate1 - oDate;//計算差值
				
				//表示出天數、小時、分鐘、秒數
				var h = Math.floor(cha/1000/60/60);//取小時
				var m = Math.floor(cha/1000/60%60);//分鐘
				var s = Math.floor(cha/1000%60);//秒
				//如果小於10,前面加0
				var h = h < 10?"0"+h:h;
				var m = m < 10?"0"+m:m;
				var s = s < 10?"0"+s:s;
				
				//在頁面中顯示
				var arr = [h,m,s];
				for(let i = 0;i < oLi.length;i++){
					oLi[i].innerHTML = arr[i];
				}
				
				if(cha < 0){//時間<0,結束
					box.innerHTML = "倒計時結束";
					clearInterval(timer);//清除定時器
				}
			}
			foo();
			var timer;
			setInterval(foo,1000);//定時器
		</script>

背景圖如下：