<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Clock</title> <Scripttype= "Text/javascript"> functiontodouble (num)//Less than two bits, empty 0 {if(Num<Ten) { return '0'+num;//a number in front plus 0, it becomes two digits}Else { return "'+num; }} window.onload=function()//program main run content {varobtn=document.getElementById ('BTN1'); varaimg=document.getElementsByTagName ('img'); varI=0; functionUpdateTime () {varodate=Newdate ();//Get system timevarStr=todouble (Odate.gethours ())+todouble (Odate.getminutes ())+todouble (Odate.getseconds ()); //alert (str); for(i=0; I<Aimg.length;i++) {aimg[i].src='img/'+Str.charat (i)+'. PNG';//Set Picture path using Charat method}} SetInterval (UpdateTime, +);//automatically follow the system time to refresh UpdateTime (),//To avoid the page refresh time to stay 1 seconds wait}; </Script></Head><Bodystyle= "color: #FFFF00; background: #990099; font-size:30px;"> <imgsrc= "C:\Users\Administrator\Desktop\ exercise file \ Digital Clock \img\0.png"/> <imgsrc= "C:\Users\Administrator\Desktop\ exercise file \ Digital Clock \img\0.png"/>Point<imgsrc= "C:\Users\Administrator\Desktop\ exercise file \ Digital Clock \img\0.png"/> <imgsrc= "C:\Users\Administrator\Desktop\ exercise file \ Digital Clock \img\0.png"/>points<imgsrc= "C:\Users\Administrator\Desktop\ exercise file \ Digital Clock \img\0.png"/> <imgsrc= "C:\Users\Administrator\Desktop\ exercise file \ Digital Clock \img\0.png"/>seconds</Body></HTML>
Running results such as:
Using JS function to make clock running program