Implementation results:
Preparatory work:
Knowledge about the # Timer
* JavaScript Date (date) object
3# the picture used to prepare the effect
Implementation principle:
# gets the current time;
var time=new Date (), Var ihours=time.gethours (), Var iminutes=time.getminutes (), Var iseconds=time.getseconds (), Var Inow=double (ihours) + ': ' +double (iminutes) + ': ' +double (iseconds);
set timer, 1s to execute once;
SetInterval (function () {code//Code section},1000);
3# dynamically changes the corresponding IMG attribute value via real time data
3.1 Method One: The fixed position picture displays the corresponding time data
Arrimg[0].src= ' img/' +parseint (IHOURS/10) + '. jpg '; arrimg[1].src= ' img/' +ihours%10+ '. jpg ';
3.2 method Two: Get the date string by Charat () specify the position character and then change the IMG property value of the corresponding picture
Arrimg[i].src= ' img/' +inow.charat (i) + '. jpg ';
Code section:
method one: fixed position picture displays corresponding time data
<! DOCTYPE html>Method Two: Get the date string by Charat () to specify the position character and then change the IMG property value of the corresponding picture
<! DOCTYPE html>
Javascript: an elegant clock