js制作数码时钟

js制作数码时钟js制作数码时钟


首先新建一个文件夹,里面有0-9十张图片,

思路及注意点:


1.获取系统时间

Date对象

getHours,getMinutes,getSeconds

2.显示系统时间

字符串连接

空位补零

3.设置图片路径

charAt方法


代码如下:



<style>

*{font-size: 40px;color: yellow;background: red;}

</style>

<img src="images/0.png">

<img src="images/0.png">

<img src="images/0.png">

<img src="images/0.png">

<img src="images/0.png">

<img src="images/0.png">

<script>

function toDouble(num){     //定义函数,空位补零

if(num<10){

return '0'+num;

}else {

return ''+num;

}

}

window.onload=function  () {

function show(){

var i=0;

var oData=new Date();   //获取当前时间

var oBtn1=document.getElementById('btn1');

var oImg=document.getElementsByTagName("img");

var str=''+toDouble(oData.getHours())+toDouble(oData.getMinutes())+toDouble(oData.getSeconds());   //前面加'',是为了变成字符串链接,而不是纯数字进行数学相加

// alert(str);

for (var i = 0; i < oImg.length; i++) {

oImg[i].src='images/'+str.charAt(i)+'.png'     //charAt()  是指在第几个位置上的字符,比如charAt(0)只在第一个位置上的字符

};

}

setInterval(show,1000);         //设置定时器,没1秒执行一次show函数

show()    //默认刷新就执行

}