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>

背景图如下：