时钟制作
首先需要10张图片,上面是分别是0-9的数字,获得时间,将时间变为字符串,在循环,让相应的图片显示,达到时钟的目的,需要用到定时器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >定时时钟</ title > < script > function toDou(n){//将编程字符串 if(n< 10 ){ return '0'+n;//例如03 }else{ return ''+n;//例如11 } } window.onload=function (){ var aImg=document.getElementsByTagName('img');//获得图片元素的集合 function tick(){ var oDate=new Date();//获得当前时间 var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds()); //str='311232';//将当前的时分秒变为相应的字符串 for(var i=0;i<aImg.length;i++){//for循环,根据字符串各位的数字变换相应的图像 aImg[i].src='img/'+str[i]+'.png'; } } setInterval(tick,1000);//一秒执行一次,变一次图片 tick();//先执行函数,可以避免刷新时全变为0 }</script> </ head > < body style="background:#0F0; color:#FC0; font-size:50px;"> < img src="img/0.png"/> < img src="img/0.png"/> : < img src="img/0.png"/> < img src="img/0.png"/> : < img src="img/0.png"/> < img src="img/0.png"/> </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步