<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Clocks </title>
<!--another clock--
<script language= "JavaScript" >
var H = ' ... ';
var H = H.split ("");
var M = "....";
var M = M.split ("");
var S = "....";
var S = S.split ("");
var Ypos = 0;
var Xpos = 0;
var ybase = 8;
var Xbase = 8;
var dots = 12;
function Clock1 () {
var time = new Date ();
var secs = Time.getseconds ();
var seco = 1.57 + Math.pi*secs/30;
var mins = Time.getminutes ();
var min = 1.57 + Math.pi*mins/30;
var hrs = time.gethours ();
var hr = 1.57 + MATH.PI*HRS/6 + math.pi*parseint (time.getminutes ())/360;
for (var i = 0;i < Dots;++i) {
document.getElementById ("Dig" + (i+1)). Style.top = 0-15 + * Math.sin ( -0.49 + dots + i/1.9). ToString () + "px";
document.getElementById ("Dig" + (i+1)). Style.left = 0-14 + * Math.Cos ( -0.49 + dots+ i/1.9). toString () + "px";
}
for (var i = 0;i< s.length;++i) {
document.getElementById ("SEC" + (i + 1)). Style.top = Ypos + i * ybase + math.sin (secs). toString () + "px";
document.getElementById ("SEC" + (i + 1)). Style.left = Xpos + i* Xbase; + Math.Cos (secs). toString () + "px"
}
for (var i = 0;i < m.length;i++) {
document.getElementById ("min" + (i + 1)). Style.top = Ypos + i * ybase + math.sin (min). toString () + "px";
document.getElementById ("min" + (i + 1)). Style.left = Xpos + i * Xbase + math.cos (min). toString () + "px";
}
for (i = 0;i < h.length;i++) {
document.getElementById ("hour" + (i + 1)). Style.top = Ypos + ybase * i + math.sin (hrs). toString () + "px";
document.getElementById ("hour" + (i + 1)). Style.top = Ypos + ybase * i + math.sin (hrs). toString () + "px";
}
SetTimeout (' Clock1 () ', 50);
}
</script>
<style>
div.dig,div.hour,div.min,div.sec{
Position:absolute;
}
div.hour,div.min,div.sec{
width:2px;
height:2px;
font-size:2px;
}
div.dig{
width:30px;
height:10px;
font-size:10px;
Color: #00000;
Text-align:center;
padding-top:10px;
font-family: "Blackbody";
}
div.min{
Background-color: #0000FF;
}
div.hour{
Background-color: #00000;
}
div.sec{
Background-color: #FF000;
}
</style>
<body onload= "Click1 ()" >
<div class= "Example" >
<table>
<tr>
<td>
<div style= "width:120px;height:100px;position:relative;left:58px;text-outline:50px;" >
<div id = "DIG1" class= "Dig" >1</div>
<div id = "Dig2" class= "Dig" >2</div>
<div id = "DIG3" class= "Dig" >3</div>
<div id = "DIG4" class= "Dig" >4</div>
<div id = "Dig5" class= "Dig" >5</div>
<div id = "Dig6" class= "Dig" >6</div>
<div id = "Dig7" class= "Dig" >7</div>
<div id = "Dig8" class= "Dig" >8</div>
<div id = "DIG9" class= "Dig" >9</div>
<div id = "DIG10" class= "Dig" >10</div>
<div id = "DIG11" class= "Dig" >11</div>
<div id = "Dig12" class= "Dig" >12</div>
<div id = "HOUR1" name = "Hour" ></div>
<div id = "HOUR2" name = "Hour" ></div>
<div id = "HOUR3" name = "Hour" ></div>
<div id = "HOUR4" name = "Hour" ></div>
<div id = "Min1" class = "min" ></div>
<div id = "Min2" class = "min" ></div>
<div id = "Min3" class = "min" ></div>
<div id = "MIN4" class = "min" ></div>
<div id = "MIN5" class = "min" ></div>
<div id = "SEC1" class= "SEC" ></div>
<div id = "SEC2" class= "SEC" ></div>
<div id = "SEC3" class= "SEC" ></div>
<div id = "SEC4" class= "SEC" ></div>
<div id = "SEC5" class= "SEC" ></div>
<div id = "SEC6" class= "SEC" ></div>
</div>
</td>
</tr>
</table>
</div>
<!--<canvas id = "Clock" style= "Background-color:black" width= "500px" height= "500px" >-->
<!--your browser does not support canvas-->
<!--</canvas>-->
<!--<script type= "Text/javascript" >-->
<!--var canvas = document.getElementById ("clock");-->
<!--var cxt = Canvas.getcontext ("2d");-->
<!--function Drawclock () {-->
<!--var now = new Date ();-->
<!--var sec = now.getseconds ();-->
<!--var mint = now.getminutes ();-->
<!--var hour = now.gethours ();-->
<!--hour>12?hour-12:hour;-->
<!--hour+= (MINT/60);-->
<!--//empty canvas--
<!--cxt.clearrect (0,0,canvas.width,canvas.height);-->
<!--//Select Picture as background--
<!--var img = new Image ();-->
<!--IMG.SRC = "1.jpeg";-->
<!--cxt.drawimage (img,46,46);-->
<!--//Draw the dial---
<!--Cxt.strokestyle = "#00FFFF";-->
<!--Cxt.linewidth = 10;-->
<!--Cxt.beginpath ();-->
<!--Cxt.arc (250,250,200,0,360);-->
<!--Cxt.stroke ();-->
<!--Cxt.closepath ();-->
<!--//Time--
<!--for (var i;i<12;i++) {-->
<!--//remain as--
<!--Cxt.save ();-->
<!--Cxt.linewidth = 7;-->
<!--Cxt.strokestyle = "#FFFF00";-->
<!--//Set the origin-
<!--cxt.translate (250,250);-->
<!--//Set rotation angle--
<!--cxt.rotate (30*math.pi*i/180);-->
<!--Cxt.beginpath ();-->
<!--Cxt.moveto (0,-175);-->
<!--Cxt.lineto (0,-195);-->
<!--Cxt.stroke ();-->
<!--Cxt.closepath ();-->
<!--Cxt.restore ();-->
<!--}-->
<!--//minute scale--
<!--for (var i = 0;i < 60;i++) {-->
<!--Cxt.save ();-->
<!--Cxt.linewidth = 5;-->
<!--Cxt.strokestyle = "#FFFF00";-->
<!--cxt.translate (250,250);-->
<!--cxt.rotate (i*6*math.pi/180);-->
<!--Cxt.beginpath ();-->
<!--Cxt.moveto (0,-185);-->
<!--Cxt.lineto (0,-195);-->
<!--Cxt.closepath ();-->
<!--Cxt.restore ();-->
<!--}-->
<!--//hour angle--
<!--Cxt.save ();-->
<!--Cxt.linewidth = 7;-->
<!--Cxt.strokestyle = "#00FFFF";-->
<!--cxt.translate (250,250);-->
<!--cxt.rotate (hour*30*math.pi/180);-->
<!--Cxt.beginpath ();-->
<!--Cxt.moveto (0,-130);-->
<!--Cxt.lineto (0,10);-->
<!--Cxt.stroke ();-->
<!--Cxt.closepath ();-->
<!--Cxt.restore ();-->
<!--//minute hand angle--
<!--Cxt.save ();-->
<!--Cxt.linewidth = 5;-->
<!--Cxt.strokestyle = "#FFFF00";-->
<!--cxt.translate (250,250);-->
<!--cxt.rotate (math.pi*mint*6/180);-->
<!--Cxt.beginpath ();-->
<!--Cxt.lineto (0,-150);-->
<!--Cxt.moveto (0,10);-->
<!--Cxt.stroke ();-->
<!--Cxt.closepath ();-->
<!--Cxt.restore ();-->
<!--//second hand angle--
<!--Cxt.save ();-->
<!--Cxt.linewidth = 3;-->
<!--Cxt.strokestyle = "#FF0000";-->
<!--cxt.translate (250,250);-->
<!--cxt.rotate (sec*6*math.pi/180);-->
<!--Cxt.beginpath ();-->
<!--Cxt.lineto ( -0,170);-->
<!--Cxt.moveto (0,10);-->
<!--Cxt.stroke ();-->
<!--Cxt.closepath ();-->
<!--Cxt.restore ();-->
<!--//In the middle of the small circle--
<!--Cxt.beginpath ();-->
<!--Cxt.arc (0,0,7,0,360);-->
<!--Cxt.fillstyle = "#FFFF00";-->
<!--Cxt.fill ();-->
<!--Cxt.strokestyle = "#FF0000";-->
<!--Cxt.stroke ();-->
<!--Cxt.closepath ();-->
<!--//small round on second hand--
<!--Cxt.beginpath ();-->
<!--Cxt.arc (0,-140,7,0,360);-->
<!--Cxt.fillstyle = "#FFFF00";-->
<!--Cxt.fill ();-->
<!--Cxt.stroke ();-->
<!--Cxt.closepath ();-->
<!--Cxt.restore ();-->
<!--//Show Time-
<!--Cxt.font = "18px Microsoft Ya Black";-->
<!--Cxt.linewidth = 2;-->
<!--Cxt.fillstyle = "#FFFF00";-->
<!--hour = now.gethours ();-->
<!--var str = hour>10?hour: ("0" +hour) + ":" + (Mint>10?mint: ("0" +mint));-->
<!--Cxt.filltext (str,225,380);-->
<!--Cxt.font = "12px Arial";-->
<!--Cxt.linewidth = 1;-->
<!--Cxt.filltext ("Made in China", 210,400);-->
<!--}-->
<!--Drawclock ();-->
<!--setinterval (Drawclock (),;-->
<!--</script>-->
</body>
2016/1/17 Clock
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
