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;
}
最后的效果图:
下面是我用的图片timg.jpeg,图片可以网上随便找,只要调整到相对应的数字即可。