Javascript: an elegant clock

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