Jquery image clock and jquery clock

Jquery image clock and jquery clock
1. Generate a 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 ;}}/* Set Convert a number to a string and display one digit as two digits. */function toTwo (n) {return n <10? '0' + n: ''+ n ;}</script> <p id =" time "> </p>

Effect:

2. convert numbers to Image Method 1:

The image name is a number.

Images used:

Write a function strToImg (str) to convert every number in a string into a corresponding image, and then dynamically create the tag.

Note: The content in the <p> label needs to be cleared for each call.

<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; strT OImg (str) ;}}/* converts a number to a string and shows two digits in one digit. */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 2: [not applicable]

If the image name is not a pure number, save it as an array.

There are too many dom operations in this method, and the efficiency is very low. Sometimes the six nodes are not displayed completely.

Because I was looking for information to see that this writing involves image pre-loading, so that it can speed up the efficiency. After trying it out, I still don't quite understand the pre-loading principle,Trap.

<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 and shows two digits in one digit. */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 an array element, match the subscript of the array element with the numeric characters of the image to 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>

Method 3:

Encode the tag in html.

<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);} var imageArray = []; // define an image to the corresponding array element to make the array element The subscript corresponds to the numeric characters of the image. 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 and shows two digits in one digit. */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 4: [recommended]

Dynamically generate labels and write them efficiently.

<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);}/* converts a number to a string and shows two digits in one digit. */function toTwo (n ){ Return n <10? '0' + n: ''+ n;} var imageArray = []; // define an image to an array element, make the array element subscript One to One correspond to the number characters corresponding to the image 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 = "

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.