Cipta kesan jam gambar dengan jquery_jquery

1. Hasilkan jam digital

<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&#63;'0'+n:''+n;
}
</script>

<p id="time"></p>

Kesan:

2. Tukar nombor kepada gambar
Kaedah 1:
Nama gambar ialah nombor, ditulis dengan cara yang paling mudah.

Gambar yang digunakan:

Tulis fungsi strToImg(str) untuk menukar setiap nombor dalam str rentetan kepada imej yang sepadan, kemudian buat teg
Nota: Kandungan dalam teg

perlu dikosongkan setiap kali ia dipanggil.

<script></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&#63;'0'+n:''+n;
}

function strToImg(str){
 var str=str;
 $("#time").empty();
 for(var i=0;i<str.length;i++){
  var oImg=$("<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201511/2015112483002530.gif&#63;2015102483010?x-oss-process=image/resize,p_40"  class="lazy"  / alt="Cipta kesan jam gambar dengan jquery_jquery" >");
  oImg.attr("src","images/"+str.charAt(i)+".png");
  $("#time").append(oImg);
 }
}
</script>

<p id="time"></p>

Kaedah 2: [Tidak berkenaan]

Jika nama imej bukan nombor tulen, simpan dalam tatasusunan.

Kaedah ini mengendalikan terlalu banyak DOM dan sangat tidak cekap Kadangkala 6 nod tidak dipaparkan sepenuhnya.

Kerana niat asal saya adalah untuk menyemak maklumat dan melihat bahawa penulisan seperti ini melibatkan pramuat imej, dan saya fikir ia boleh mempercepatkan kecekapan. Saya mencubanya, tetapi sekarang nampaknya saya masih tidak memahami prinsip pramuat, meninggalkan perangkap.

<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&#63;'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>

Kaedah 3:
Kod keras teg dalam html.

<p id="time"><img  src="/static/imghwm/default1.png"  data-src="images/0.png"  class="lazy"/ alt="Cipta kesan jam gambar dengan jquery_jquery" ><img  src="/static/imghwm/default1.png"  data-src="images/0.png"  class="lazy"/ alt="Cipta kesan jam gambar dengan jquery_jquery" ><img  src="/static/imghwm/default1.png"  data-src="images/0.png"  class="lazy"/ alt="Cipta kesan jam gambar dengan jquery_jquery" ><img  src="/static/imghwm/default1.png"  data-src="images/0.png"  class="lazy"/ alt="Cipta kesan jam gambar dengan jquery_jquery" ><img  src="/static/imghwm/default1.png"  data-src="images/0.png"  class="lazy"/ alt="Cipta kesan jam gambar dengan jquery_jquery" ><img  src="/static/imghwm/default1.png"  data-src="images/0.png"  class="lazy"/ alt="Cipta kesan jam gambar dengan jquery_jquery" ></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&#63;'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>

Kaedah 4: [Disyorkan]
Jana teg secara dinamik dan tuliskannya dengan cekap.

<p id="time"></p>

<script></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&#63;'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="/static/imghwm/default1.png"  data-src="+imageArray[str.charAt(i)]+"  class="lazy"/ alt="Cipta kesan jam gambar dengan jquery_jquery" >";
 tempHtml+=imgHtml;  
 }
 $("#time").html(tempHtml);
}
</script>

Di atas adalah semua kod untuk mencipta kesan jam gambar dengan jquery.