Home > Developer > JavaScript
JS can do a lot of interesting small animation, the following is a simple clock, a small example, may be a bit more style written, the bottom end (as The old driver I am a little bit of the perfect obsessive-compulsive ha haha ...) )
<! DOCTYPE html>
<title> Clocks </title>
<meta charset = "utf-8" >
<style type= "text/css" >
span{
margin:0;
padding:0;
}
#box {
width:600px;
height:600px;
border:1px Solid RGB (99,99,99);
border-radius:50%;
margin:50px auto;
position:relative;
Background:rgb (155,155,155);
box-shadow:0 0 20px RGB (99,99,99);
}
#round {
width:540px;
height:540px;
border:1px Solid RGB (99,99,99);
border-radius:50%;
position:absolute;
top:30px;
left:30px;
box-shadow:0 0 20px RGB (99,99,99) inset;
}
#round span{
color:white;
font-size:50px;
position:absolute;
}
#L {
left:242px;
top:10px;
}
#F {
left:254px;
bottom:10px;
}
#I {
left:10px;
top:248px;
}
#C {
right:10px;
bottom:242px;
}
#A {
right:130px;
top:45px;
}
#B {
right:45px;
top:130px;
}
#D {
right:45px;
bottom:130px;
}
#E {
right:130px;
bottom:45px;
}
#K {
left:130px;
top:45px;
}
#J {
left:45px;
top:130px;
}
#H {
left:45px;
bottom:130px;
}
#G {
left:130px;
bottom:45px;
}
#down {
width:40px;
height:40px;
Background:rgb (39,39,39);
border-radius:50%;
position:absolute;
left:250px;
top:250px;
}
#sec {
width:240px;
height:3px;
background:red;
position:absolute;
left:240px;
top:269px;
transform-origin:31px;
}
#min {
width:220px;
height:8px;
Background:rgb (67,91,32);
position:absolute;
left:240px;
top:266px;
transform-origin:31px;
}
#hour {
width:190px;
height:12px;
Background:rgb (200,20,24);
position:absolute;
left:240px;
top:264px;
transform-origin:31px;
}
#up {
width:20px;
height:20px;
background:white;
border-radius:50%;
position:absolute;
left:260px;
top:260px;
}
</style>
<body>
<div id= "box" >
<div id= "round" >
<span id= "A" >1</span>
<span id= "B" >2</span>
<span id= "C" >3</span>
<span id= "D" >4</span>
<span id= "E" >5</span>
<span id= "F" >6</span>
<span id= "G" >7</span>
<span id= "H" >8</span>
<span id= "I" >9</span>
<span id= "J" >10</span>
<span id= "K" >11</span>
<span id= "L" >12</span>
<div id= "down" ></div>
<div id= "sec" ></div>
<div id= "min" ></div>
<div id= "hour" ></div>
<div id= "up" ></div>
</div>
<script type= "text/javascript" >
Get element
var hour = document.getElementById (' hour ');
var min = document.getElementById (' min ');
var sec = document.getElementById (' sec ');
Defining Refresh Functions
Function Fresh () {
Get the time of the moment
var date = new Date ();
var sec2 = Date.getseconds ();
var min2 = Date. getminutes ();
var hour2 = Date. GetHours ();
12 O'clock-system Conversion
HOUR2 = HOUR2 > 12? hour2-12:hour2;
The second hand 1s turns at an angle of 6 degrees, since the starting position is at 3 points and needs to be subtracted by 90 degrees.
var s = sec2 * 6-90;
Sec.style.transform = ' Rotate (' + S + ' Deg) ';
The minute hand rotates the minute hand with the second hand.
var a = sec2/60 * 6;
var b = min2 * 6-90;
var C = A + b;
Min.style.transform = ' rotate (' + C + ' Deg) ';
The hour hand rotates the hour hand with the minute hand.
var d = min2/60 * 30;
var e = hour2 * 30-90;
var f = d + e;
Hour.style.transform = ' rotate (' + f + ' Deg) ';
}
Fresh ();
refresh once every 1s
SetInterval (function () {
Fresh ();
},1000);
</script>
</div>
</body>
Make a simple clock from the Javascript,setinterval
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
