用JavaScript+html+css做的一个简易的数码时钟,具有一定的观赏性,Demo效果:
具体步骤如下:
数码时钟的做法思路就是:给出六张图片,分别对应“时分秒”六个数字,然后用JS实时获取当前时间,并与图片数字对应,最后设置定时器,让时钟动起来。
HTML部分
<ul>
<li><img src="images/0.png" alt=""></li>
<li><img src="images/0.png" alt=""></li>
<li></li>
<li><img src="images/0.png" alt=""></li>
<li><img src="images/0.png" alt=""></li>
<li></li>
<li><img src="images/0.png" alt=""></li>
<li><img src="images/0.png" alt=""></li>
</ul>
标注:将用到的数字图片命名为对应的数字,比如“0”这张数字图片的名字为“0”;为什么这么做呢?待会就知道啦!第三个li和第六个li为啥空着呐?那是因为这两个位置是用来放置冒号图片的,小编是在css样式里给它加上对应的背景图片。
下面增加点CSS样式修饰一下图片:
<style>
body{
background: rgba(228, 22, 255, 0.32);
}
ul{
position: absolute;
width: 80%;
top:250px;
left:50px;
text-align: center;
}
ul li{
display: inline-block;
list-style: none;
}
li:nth-child(6){
width:100px;
height:100px;
background: url("images/mao.png") no-repeat;
background-size: 100% 100%;
}
li:nth-child(3){
width:100px;
height:100px;
background: url("images/mao.png") no-repeat;
background-size: 100% 100%;
}
img{
width:100px;
height:143px;
}
</style>
初始效果图:
现在加上JavaScript代码,让它动起来,动起来的原理,除了设置定时器外,就是实时改变图片的路径,将它与获取到的时间一一对应,也就是为什么要把图片名字命名为对应的数字,妙就妙在这里!
附上JavaScript代码部分:
<script>
function add(i) { //设置函数,如果获取到的时间<10,就在它前面加上字符“0”,比如获取到的小时为5,那么输出就是“05”
if(i<10)
return '0'+i;
else
return ''+i;
}
window.οnlοad=function () {
setInterval(function(){
var time = new Date();
var hour = time.getHours(), //获取当前小时数字
min = time.getMinutes(), //获取当前分钟数字
sec = time.getSeconds(); //获取当前秒数数字
hour=add(hour); //应用转化函数
min=add(min); //应用转化函数
sec=add(sec); //应用转化函数
var Img=document.getElementsByTagName('img'); //获取图片,此时获取到是数组
var array=hour+min+sec; //将当前时间连接在一起
for(var i=0;i<Img.length;i++){
Img[i].src='images/'+array.charAt(i)+'.png'; //charAt(i)获取某字符串的第i个字符
}
},1000) //设置定时器,每隔一秒刷新页面
}
</script>
好了,以上就是全部代码了,一个简易的数码时钟就做完了!有兴趣的同学可以试试。
另附上数码时钟的图片素材:http://pan.baidu.com/s/1kVspFBh
如有疑问,欢迎留言骚扰!