jquery make picture clock special effects _jquery

First, the generation of digital clock

<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
 }
 
}
/* Converts a number to a string with a number displayed as two digits,
/function Totwo (n) {return
 n<10? ' 0 ' +n: ' +n
}
</script>

<p id= "Time" ></p>

Effect:

Second, convert the number to a picture
Method One:
The name of the picture is the number, with the simplest wording.

Use the Picture:

Write a function strtoimg (str) converts each number in a string str to the corresponding picture, and then dynamically creates tags.
Note: The contents of the <p> label must be emptied each time it is called.

<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);
 }
/* Converts a number to a string with a number displayed as two digits,
/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=$ ("

<p id= "Time" ></p>

Method Two: "Not applicable"

If the picture name is not a pure number, save it with an array.

This method operates the DOM too much, is very inefficient, and sometimes 6 nodes are not fully displayed.

Because my intention is to check the data to see this writing involves the picture preload, thought can speed up efficiency. After a while, it seems that I still do not understand the preload principle, leaving the pit.

<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); /* Convert number to string with one number displayed as two-bit,/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 ();
 ///define an image to the corresponding array element so that the array element subscript corresponds to the digital character one by one corresponding to the 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>

The

method Three:
Encodes labels in HTML.

<p id= "Time" > </p> 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=[];
 Define an image to the corresponding array element, so that the array element subscript and the image corresponding to the digital character one by one corresponds to 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"; /* Converts a number to a string with a number displayed as two digits,/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>

method Four: "Recommended"
Dynamic Generation label, and efficient writing.

<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); /* Convert number to string with one number displayed as two-bit,/function Totwo (n) {return n<10? '
0 ' +n: ' +n;
 } var imagearray=[];
 Define an image to the corresponding array element, so that the array element subscript and the image corresponding to the digital character one by one corresponds to 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= "

The above is for you to share the jquery production picture clock effects of all the code, I hope you like.