1. 디지털 시계 생성
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); function fnTime(){ var myTime=new Date(); var iHours=myTime.getHours(); var iMin=myTime.getMinutes(); var iSec=myTime.getSeconds(); var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec); oP.innerHTML=str; } } /*将数字转换为字符串且一位数显示为两位,*/ function toTwo(n){ return n<10?'0'+n:''+n; } </script> <p id="time"></p>
효과:
2. 숫자를 그림으로 변환
방법 1:
사진 이름은 숫자로, 가장 간단하게 적었습니다.
사용된 사진:
문자열 str의 각 숫자를 해당 이미지로 변환하는 함수 strToImg(str)를 작성한 다음 a1f02c36ba31691bcfe87b2722de723b 태그를 동적으로 생성합니다.
참고: e388a4556c0f65e1904146cc1a846bee 태그의 내용은 호출될 때마다 지워져야 합니다.
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); function fnTime(){ var myTime=new Date(); var iHours=myTime.getHours(); var iMin=myTime.getMinutes(); var iSec=myTime.getSeconds(); var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec); //oP.innerHTML=str; strToImg(str); } } /*将数字转换为字符串且一位数显示为两位,*/ function toTwo(n){ return n<10?'0'+n:''+n; } function strToImg(str){ var str=str; $("#time").empty(); for(var i=0;i<str.length;i++){ var oImg=$("<img />"); oImg.attr("src","images/"+str.charAt(i)+".png"); $("#time").append(oImg); } } </script> <p id="time"></p>
방법 2: [해당 없음]
이미지 이름이 순수 숫자가 아닌 경우 배열로 저장하세요.
이 방법은 너무 많은 DOM을 운영하므로 6개의 노드가 완전히 표시되지 않는 경우가 있습니다.
원래 의도는 정보를 확인하는 것이었고, 이렇게 글을 쓰는 것은 이미지를 미리 로딩하는 것을 보고 효율성을 높일 수 있다고 생각했기 때문입니다. 시도해 보았는데, 지금은 아직까지 프리로드의 원리를 이해하지 못해 함정을 남긴 것 같습니다.
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); } function fnTime(){ var myTime=new Date(); var iHours=myTime.getHours(); var iMin=myTime.getMinutes(); var iSec=myTime.getSeconds(); var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec); //oP.innerHTML=str; strToImg(str); } /*将数字转换为字符串且一位数显示为两位,*/ function toTwo(n){ return n<10?'0'+n:''+n; } function strToImg(str){ var str=str; var imageArray=[]; for(i=0;i<11;i++){ imageArray[i]=new Image(); } //将个图像定义给相应的数组元素,使数组元素下标与图像所对应的数字字符一一对应 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(var i=0;i<str.length;i++){ var oImg=imageArray[str.charAt(i)]; //oImg.attr("src",imageArray[i].src); $("#time").append(oImg); } } </script> <p id="time"></p>
방법 3:
HTML에 a1f02c36ba31691bcfe87b2722de723b 태그를 하드코딩합니다.
<p id="time"><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"/></p> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); } function fnTime(){ var myTime=new Date(); var iHours=myTime.getHours(); var iMin=myTime.getMinutes(); var iSec=myTime.getSeconds(); var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec); //oP.innerHTML=str; strToImg(str); } var imageArray=[]; //将个图像定义给相应的数组元素,使数组元素下标与图像所对应的数字字符一一对应 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"; /*将数字转换为字符串且一位数显示为两位,*/ function toTwo(n){ return n<10?'0'+n:''+n; } function strToImg(str){ var str=str; for(var i=0;i<str.length;i++){ $("#time").find("img").eq(i).attr("src",imageArray[str.charAt(i)]); } } </script>
방법 4: [권장]
a1f02c36ba31691bcfe87b2722de723b 태그를 동적으로 생성하고 효율적으로 작성합니다.
<p id="time"></p> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); } function fnTime(){ var myTime=new Date(); var iHours=myTime.getHours(); var iMin=myTime.getMinutes(); var iSec=myTime.getSeconds(); var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec); //oP.innerHTML=str; strToImg(str); } /*将数字转换为字符串且一位数显示为两位,*/ function toTwo(n){ return n<10?'0'+n:''+n; } var imageArray=[]; //将个图像定义给相应的数组元素,使数组元素下标与图像所对应的数字字符一一对应 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"; function strToImg(str){ var str=str; var tempHtml=''; for(var i=0;i<str.length;i++){ var imgHtml="<img src="+imageArray[str.charAt(i)]+"/>"; tempHtml+=imgHtml; } $("#time").html(tempHtml); } </script>
위 내용은 모두 jquery를 사용하여 그림 시계 효과를 만드는 코드입니다.