Home > Developer > Web Develop
1. Preparation before making
Pick your favorite 0~9 digital pictures on the Web, download them, and use PS to cut these pictures into the size (I cut into 50px*60px).
2. Layout
In the HTML to refer to these pictures, side by side, and in each of the two in the middle with ":", will contain the picture tag Div set to center.
3. Function realization
The initial picture display is set to the number 0, then "00:00:00" is displayed on the static page, because the image has been named 0~9.png
by gethours (), getminutes (), getseconds () respectively get the time and seconds of the six values (note that when the system time of cent seconds less than 10 to be in front of 0, so as to the image tag in the array one by one corresponding),
The six values are then passed to the file name of the image label array. And through the SetInterval (timer,1000) to complete the change of the corresponding digital picture through time.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Aesthetic Digital Clock</title> <styletype= "Text/css"> * {padding:0;margin:0; }Body{background:Black;}#div1{width:600px;Height:200px;Color: White;font-size:50px;margin:50px Auto; } </style><!--set the clock timer date function to change, get the system clock to replace the picture in SRC with the system clock, system time is not two-digit time judgment, consider ' 0 ' + ' System number ' - <Scripttype= "Text/javascript">window.onload=function() { varODiv1=document.getElementById ('body1'); varaimg=document.getElementsByTagName ('img'); //var str= ' 012332 ';Timer=function() { //set up 0 functions functionTodou (n) {if(n<Ten) { return '0'+N; } Else { return "'+N; } } //function to get the system clock varadate=NewDate (); varStr=Todou (Adate.gethours ())+Todou (Adate.getminutes ())+Todou (Adate.getseconds ()); for (varI= 0; I<aimg.length; I++) {aimg[i].src='numberpicture/'+Str.charat (i)+'. PNG'; }; } setinterval (Timer, +); Timer (); } </Script></Head><BodyID= "Body1"><DivID= "Div1"><imgsrc= "Numberpicture/0.png"><imgsrc= "Numberpicture/0.png">:<imgsrc= "Numberpicture/0.png"><imgsrc= "Numberpicture/0.png">:<imgsrc= "Numberpicture/0.png"><imgsrc= "Numberpicture/0.png"></Div></Body></HTML>
One of the front-end works--web digital clock making
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
