Créez des effets d'horloge illustrée avec jquery_jquery

1. Générer une horloge numérique

<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>

Effet :

2. Convertir des nombres en images
Méthode 1 :
Le nom de l'image est un chiffre, écrit de la manière la plus simple.

Photos utilisées :

Écrivez une fonction strToImg(str) pour convertir chaque nombre d'une chaîne str en l'image correspondante, puis créez dynamiquement la balise .
Remarque : Le contenu de la balise

doit être effacé à chaque appel.

<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;
 $("#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>

Méthode 2 : [Non applicable]

Si le nom de l'image n'est pas un nombre pur, enregistrez-le dans un tableau.

Cette méthode exploite trop de DOM et est très inefficace Parfois les 6 nœuds ne sont pas entièrement affichés.

Parce que mon intention initiale était de vérifier les informations et j'ai vu qu'écrire comme ceci impliquait un préchargement d'image, et j'ai pensé que cela pourrait accélérer l'efficacité. Je l'ai essayé, mais maintenant il semble que je ne comprenne toujours pas le principe du préchargement, ce qui laisse un écueil.

<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>

Méthode 3 :
Codez en dur la balise dans le code HTML.

<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&#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>

Méthode 4 : [Recommandée]
Générez dynamiquement des balises et écrivez-les efficacement.

<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&#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="+imageArray[str.charAt(i)]+"/>";
 tempHtml+=imgHtml;
 }
 $("#time").html(tempHtml);
}
</script>

Ce qui précède est tout le code pour créer des effets d'horloge photo avec jquery. J'espère que vous l'aimerez.