js实现图片时间

最新推荐文章于 2022-11-22 21:31:26 发布

小杨的旺仔没有牛奶

最新推荐文章于 2022-11-22 21:31:26 发布

阅读量433

点赞数 2

分类专栏： js 文章标签： js html javascript css

本文链接：https://blog.csdn.net/qq_38259997/article/details/103766555

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js实现图片时间

效果图

在这里插入图片描述

其实很简单，就是获取对应的时分秒实现拼接

var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
str = toTwo(iHours)+toTwo(iMin)+toTwo(iSec);

话不多说上代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

window.onload = function () {

	var oBody = document.body;
	var oP = document.getElementById('time');
	var aImg = document.getElementsByTagName('img');
	
	
	
	function fnTime () {
	
		var myTime = new Date();
		var iHours = myTime.getHours();
		var iMin = myTime.getMinutes();
		var iSec = myTime.getSeconds();
	    str =  toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
		
		// str = '214204';
		
//		oP.innerHTML = str;
		
		// str.charAt(5)
		// aImg[4].src = 'img/' + str.charAt(4) + '.JPG';
		// aImg[5].src = 'img/' + str.charAt(5) + '.JPG';
		for ( var i=0; i<str.length; i++ ) {
		 if(i==2 || i==5){//这里做判断添加那个冒号
			                    aImg[i].src='img/colon.JPG'
			  }
			aImg[i].src = 'img/' + str.charAt(i) + '.JPG';
			
		}
	
	}
	setInterval( fnTime, 1000 );
	
	fnTime ();
};

function toTwo ( n ) {
	return n < 10 ?  '0' + n : '' + n;
}

</script>

</head>

<body>
<p id="time" style="font-size:60px;"></p>
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
</body>
</html>

图片提供给你们

在这里插入图片描述

小杨的旺仔没有牛奶

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
js实现图片时间

js实现图片时间话不多说上代码<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onlo...
复制链接

扫一扫

专栏目录