一、生成数字时钟<scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>window.onload=function(){varoBody=document.body;varoP=document.getElementById("time");
setInterval(fnTime,1000);
fnTime();functionfnTime(){varmyTime=newDate();variHours=myTime.getHours();variMin=myTime.getMinutes();variSec=myTime.getSeconds();varstr=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
oP.innerHTML=str;
}
}/*将数字转换为字符串且一位数显示为两位，*/functiontoTwo(n){returnn<10?'0'+n:''+n;
}</script><pid="time"></p>
效果：
二、将数字转换为图片方法一：图片名称即数字，用最简单的写法。
用到图片：
写一个函数strToImg(str)将一个字符串str中每一个数字转换为对应图片，然后动态创建<img>标签。
注意：每次调用需清空<p>标签中的内容。
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>window.onload=function(){varoBody=document.body;varoP=document.getElementById("time");
setInterval(fnTime,1000);
fnTime();functionfnTime(){varmyTime=newDate();variHours=myTime.getHours();variMin=myTime.getMinutes();variSec=myTime.getSeconds();varstr=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);//oP.innerHTML=str;strToImg(str);
}
}/*将数字转换为字符串且一位数显示为两位，*/functiontoTwo(n){returnn<10?'0'+n:''+n;
}functionstrToImg(str){varstr=str;
$("#time").empty();for(vari=0;i<str.length;i++){varoImg=$("<img />");
oImg.attr("src","images/"+str.charAt(i)+".png");
$("#time").append(oImg);
}
}</script><pid="time"></p>
方法二：【不适用】如果图片名称不是纯数字，就用一个数组保存起来。
本方法操作dom太多，效率非常低，有时候6个节点显示不全。
因为我本意是查资料看到这样写涉及到图片预加载，以为可以加快效率。尝试了一下，现在看来还是不太懂预加载原理，留坑。
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>window.onload=function(){varoBody=document.body;varoP=document.getElementById("time");
setInterval(fnTime,1000);
fnTime();
}functionfnTime(){varmyTime=newDate();variHours=myTime.getHours();variMin=myTime.getMinutes();variSec=myTime.getSeconds();varstr=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);//oP.innerHTML=str;strToImg(str);
}/*将数字转换为字符串且一位数显示为两位，*/functiontoTwo(n){returnn<10?'0'+n:''+n;
}functionstrToImg(str){varstr=str;varimageArray=[];for(i=0;i<11;i++){
imageArray[i]=newImage();
}//将个图像定义给相应的数组元素，使数组元素下标与图像所对应的数字字符一一对应imageArray[0].src="images/0.png";
imageArray[1].src="images/1.png";
imageArray[2].src="images/2.png";
imageArray[3].src="images/3.png";
imageArray[4].src="images/4.png";
imageArray[5].src="images/5.png";
imageArray[6].src="images/6.png";
imageArray[7].src="images/7.png";
imageArray[8].src="images/8.png";
imageArray[9].src="images/9.png";
imageArray[10].src="images/fh.png";
$("#time").empty();for(vari=0;i<str.length;i++){varoImg=imageArray[str.charAt(i)];//oImg.attr("src",imageArray[i].src);$("#time").append(oImg);
}
}</script><pid="time"></p>
方法三：将<img>标签硬编码在html中。
<pid="time"><imgsrc="images/0.png"/><imgsrc="images/0.png"/><imgsrc="images/0.png"/><imgsrc="images/0.png"/><imgsrc="images/0.png"/><imgsrc="images/0.png"/></p><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>window.onload=function(){varoBody=document.body;varoP=document.getElementById("time");
setInterval(fnTime,1000);
fnTime();
}functionfnTime(){varmyTime=newDate();variHours=myTime.getHours();variMin=myTime.getMinutes();variSec=myTime.getSeconds();varstr=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);//oP.innerHTML=str;strToImg(str);
}varimageArray=[];//将个图像定义给相应的数组元素，使数组元素下标与图像所对应的数字字符一一对应imageArray[0]="images/0.png";
imageArray[1]="images/1.png";
imageArray[2]="images/2.png";
imageArray[3]="images/3.png";
imageArray[4]="images/4.png";
imageArray[5]="images/5.png";
imageArray[6]="images/6.png";
imageArray[7]="images/7.png";
imageArray[8]="images/8.png";
imageArray[9]="images/9.png";
imageArray[10]="images/fh.png";/*将数字转换为字符串且一位数显示为两位，*/functiontoTwo(n){returnn<10?'0'+n:''+n;
}functionstrToImg(str){varstr=str;for(vari=0;i<str.length;i++){
$("#time").find("img").eq(i).attr("src",imageArray[str.charAt(i)]);
}
}</script>
方法四：【推荐】动态生成<img>标签，且高效的写法。
<pid="time"></p><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>window.onload=function(){varoBody=document.body;varoP=document.getElementById("time");
setInterval(fnTime,1000);
fnTime();
}functionfnTime(){varmyTime=newDate();variHours=myTime.getHours();variMin=myTime.getMinutes();variSec=myTime.getSeconds();varstr=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);//oP.innerHTML=str;strToImg(str);
}/*将数字转换为字符串且一位数显示为两位，*/functiontoTwo(n){returnn<10?'0'+n:''+n;
}varimageArray=[];//将个图像定义给相应的数组元素，使数组元素下标与图像所对应的数字字符一一对应imageArray[0]="images/0.png";
imageArray[1]="images/1.png";
imageArray[2]="images/2.png";
imageArray[3]="images/3.png";
imageArray[4]="images/4.png";
imageArray[5]="images/5.png";
imageArray[6]="images/6.png";
imageArray[7]="images/7.png";
imageArray[8]="images/8.png";
imageArray[9]="images/9.png";
imageArray[10]="images/fh.png";functionstrToImg(str){varstr=str;vartempHtml='';for(vari=0;i<str.length;i++){varimgHtml="<img src="+imageArray[str.charAt(i)]+"/>";tempHtml+=imgHtml;
}
$("#time").html(tempHtml);
}</script>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4989059.html有问题欢迎与我讨论，共同进步。