<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>超酷炫时钟</title>
<style>
.wrapper{
width: 300px;
height: 100px;
margin: 0 auto;
margin-top: 200px
}
body{
background: black;
color:white;
font-size: 50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oImg=document.getElementsByTagName('img');
function toDou(n){ //这个函数可以保证返回的是一个两位数的字符串
if(n<10){
return '0'+n;
}
else{
return ''+n;
}
};
function tick(){
var oData=new Date();
var str=toDou(oData.getHours())+toDou(oData.getMinutes())+toDou(oData.getSeconds());
for(var i=0;i<oImg.length;i++){
if(str[i]){
oImg[i].src='image/'+str[i]+'.png'; //不兼容IE7
}
else{
oImg[i].src='image/'+str.charAt[i]+'.png'; //不兼容safri
}
}
}
setInterval(tick,1000);
tick(); //保证该函数在页面加载后立马就能得到运行，如果放在setInterval内，就会导致该函数需要在页面加载后
//一秒后才能运行这个函数
}
</script>
</head>
<body>
<div class='wrapper'>
<img src="image/0.png" alt="">
<img src="image/0.png" alt="">
:
<!-- <img src="image/sign.png" alt=""> -->
<img src="image/0.png" alt="">
<img src="image/0.png" alt="">
:
<!-- <img src="image/sign.png" alt=""> -->
<img src="image/0.png" alt="">
<img src="image/0.png" alt="">
</div>
</body>
</html>
JS小练习之实现一个酷炫时钟
猜你喜欢
转载自blog.csdn.net/weixin_41586886/article/details/80613713
今日推荐
周排行