js用图片显示现在时间

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

Amily_an

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

阅读量1k

点赞数

分类专栏： js 文章标签： js css html5

本文链接：https://blog.csdn.net/Amily_an/article/details/103959868

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

js用图片显示现在时间

话不多说，直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用图片显示现在时间</title>
		<link rel="stylesheet" href="css/index.css"/>
	</head>
	<body>
		<!-- 数字图片样式 -->
		<table class="number">
			<tr>
				<td class = "td1"></td>
				<td class = "td2"></td>
				<td class = "td3"></td>
				<td class = "td4"></td>
				<td class = "td5"></td>
				<td class = "td6"></td>
				<td class = "td7"></td>
				<td class = "td8"></td>
				<td class = "td9"></td>
				<td class = "td0"></td>
			</tr>
		</table>
		<!-- 显示今天日期 -->
		<table class="number">
			<tr>
				<td id="d0"></td>
				<td id="d1"></td>
				<td id="d2"></td>
				<td id="d3"></td>
				<td class="colon">-</td>
				<td id="d4"></td>
				<td id="d5"></td>
				<td class="colon">-</td>
				<td id="d6"></td>
				<td id="d7"></td>
			</tr>
		</table>
		<!-- 显示现在时刻 -->
		<table class="number">
			<tr>
				<td id="t0"></td>
				<td id="t1"></td>
				<td class="colon">:</td>
				<td id="t2"></td>
				<td id="t3"></td>
				<td class="colon">:</td>
				<td id="t4"></td>
				<td id="t5"></td>
			</tr>
		</table>
	</body>
	<script type="application/javascript">
		/* 显示现在时刻 */
		function showImgTime(){
			var myTime = new Array();
			var today = new Date();
			myTime[0] = Math.floor(today.getHours() / 10);
			myTime[1] = today.getHours() % 10;
			myTime[2] = Math.floor(today.getMinutes() / 10);
			myTime[3] = today.getMinutes() % 10;
			myTime[4] = Math.floor(today.getSeconds() / 10);
			myTime[5] = today.getSeconds() % 10;
			for (var i = 0; i < 6; i++) {
				document.getElementById("t" + i).className = "td" + myTime[i];
			}
		}
		showImgTime();
		/* 每秒调用一次 */
		setInterval(function(){
			showImgTime();
		},1000);
		/* 显示今天日期 */
		function showDateWithImage(){
			var myDate = new Array();
			var today = new Date();
			myDate[0] = Math.floor(today.getFullYear() / 1000);
			myDate[1] = Math.floor(today.getFullYear() / 100 %10);
			myDate[2] = Math.floor(today.getFullYear() / 10 %10);
			myDate[3] = today.getFullYear()% 10;
			myDate[4] = Math.floor((today.getMonth() +1) / 10);
			myDate[5] = (today.getMonth() +1) % 10;
			myDate[6] = Math.floor(today.getUTCDate() / 10);
			myDate[7] = today.getUTCDate()  % 10;
			for(var j = 0;j <8; j++){
				document.getElementById('d'+j).className = 'td'+ myDate[j];
			}
		}
		showDateWithImage()
		setInterval(function(){
			showDateWithImage()
		},1000);
		
	</script>
</html>

index.css如下：

.number{
	margin: 0 auto;
}
.number td{
	width: 100px;
	height: 150px;
	border: 1px solid black;
	background-image: url(../img/timg.jpeg);
	background-repeat: no-repeat;
	position: relative;
}

/* 每个td显示的数字调整 */
.td1{
	background-position: -12px -15px;
}

.td2{
	background-position: -102px -15px;
}

.td3{
	background-position: -202px -15px;
}

.td4{
	background-position: -295px -15px;
}

.td5{
	background-position: -395px -15px;
}

.td6{
	background-position: -5px -178px;
}

.td7{
	background-position: -105px -178px;
}

.td8{
	background-position: -200px -178px;
}

.td9{
	background-position: -295px -178px;
}

.td0{
	background-position: -395px -178px;
}

/* “:”的设置 */
.number td.colon{
	background-image: url();
	text-align: center;
	line-height: 150px;
	font-size: 120px;
	color: red;
}

最后的效果图：
js用图片显示现在时间

下面是我用的图片timg.jpeg，图片可以网上随便找，只要调整到相对应的数字即可。
数字图片

Amily_an

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js用图片显示现在时间

js用图片显示现在时间话不多说，直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>用图片显示现在时间</title> <link rel="stylesheet" href="css/index.css"/> ...
复制链接

扫一扫