程序设计之道无远弗届,御晨风而返。———— 杰佛瑞 · 詹姆士
今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码。
html
[外链图片转存失败(img-mD0n42FM-1562234069896)(https://mp.csdn.net/mdeditor/img/0.png)]
[外链图片转存失败(img-CBf3twCe-1562234069897)(https://mp.csdn.net/mdeditor/img/0.png)]
:
[外链图片转存失败(img-HHUqXzdx-1562234069898)(https://mp.csdn.net/mdeditor/img/0.png)]
[外链图片转存失败(img-zbH5kpAW-1562234069899)(https://mp.csdn.net/mdeditor/img/0.png)]
:
[外链图片转存失败(img-ImS2ZyN0-1562234069900)(https://mp.csdn.net/mdeditor/img/0.png)]
[外链图片转存失败(img-8LG4duD9-1562234069900)(https://mp.csdn.net/mdeditor/img/0.png)]
先在HTML里添加几张图片,接下来是核心部分。
js
var imgs=document.getElementsByTagName("img"); //这里获取页面图片
function pd(i){
if (i<10)
{i="0" + i}
return i
} //这个函数是判断时钟如果是个位数的话前面加个0,这样做美观一些
function foo(){
var data = new Date; //获取现在时间
var hours = data.getHours(); //小时
var minutes = data.getMinutes(); //分钟
var seconds = data.getSeconds(); //秒数
hours = pd(hours); //判断是否是个位数,否则加0
minutes = pd(minutes);
seconds = pd(seconds);
var times = String(hours)+String(minutes)+String(seconds); //把他们分别转成字符串,不然他们会相加
for (var i=0; i<imgs.length; i++){
imgs[i].src='img/'+times[i]+'.png'; //遍历这个时间位数,并改变图片的src属性达到换图片效果。
}
}
foo(); //这里调用函数,不调用开始时候全部为00:00:00
setInterval(foo,1000); //每隔一秒调用一次函数。
大概就是这样的思路,不断的替换图片就好了。若是哪里不对,欢迎大佬指点。