Make use of css+ original JS to produce simple clocks. The effect looks like this
Achieve this effect, divided into three chunks: HTML, JavaScript, CSS
HTML section
the HTML part is simpler, defines a clock div, the interior has the origin, the time second hand, the date as well as times, as to the clock on the scale, the number and so on the element, because the quantity is more, uses the Jvascript generation
<!doctype html>
CSS Section
before starting code, there are some CSS properties that need to be understood, such as positioning (position), border rounded (Border-radius), Transformations (transform), etc.
Position Property
The Position property prescribes the element's positioning type, with five values: absolute, fixed, relative, static, inherit, default static, no positioning, and elements in normal document flow The main use here is absolute and relative.
The Absulte value, which sets the element to absolute positioning, is positioned relative to the first ancestor element that is accidentally positioned in the static position, which can be located through ' left ', ' top ', ' right ', ' Bottom ' property, and if the parent element is static, position relative to the position of the BODY element
In this case, the outermost div clock is relative, all the subordinate elements are set to absolute absolute positioning, and then the position relative to clock is determined by setting the values of the left and top properties.
Border-radius Property
The Border-radius property adds a rounded border to the element, and you can set the size of the four rounded corners, which in this case is used to set the clock element to a circle
Here is an example: 4 div elements, the width of the 100px,border-radius is different when the effect:
Transform Property
The Transform property applies a 2D or 3D rotation to an element that allows us to rotate, scale, move, or skew an element. In this example, the hour hand, minute hand, second hand, scale, etc. are set to rotate using the transform property; In addition, the Transform-origin property can set the base point position of the element
CSS part of the code
/* Global * * *{margin:0;
padding:0;
}. clock{width:400px;
height:400px;
border:10px solid #333;
box-shadow:0px 0px 20px 3px #444 inset;
border-radius:210px;
position:relative;
MARGIN:5PX Auto;
Z-index:10;
Background-color: #f6f6f6;
/* Clock number/* clock-num{width:40px;
height:40px;
font-size:22px;
Text-align:center;
line-height:40px;
Position:absolute;
Z-index:8;
Color: #555;
Font-family:fantasy, ' trebuchet MS ';
}. em_num{font-size:28px/* Pointer/* clock-line{Position:absolute;
z-index:20;
}. hour-line{width:100px;
height:4px;
top:198px;
left:200px;
Background-color: #000;
border-radius:2px; transform-origin:0
50%;
box-shadow:1px-3px 8px 3px #aaa;
}. minute-line{width:130px;
height:2px;
top:199px;
left:190px;
Background-color: #000;
transform-origin:7.692% 50%;
box-shadow:1px-3px 8px 1px #aaa;
}. second-line{width:170px;
height:1px;
top:199.5px;
left:180px;
Background-color: #f60; Transform-origin:11.765% 50%;
box-shadow:1px-3px 7px 1px #bbb;
}/* Origin/origin{width:20px;
height:20px;
border-radius:10px;
Background-color: #000;
Position:absolute;
top:190px;
left:190px;
z-index:14;
}/* Date Time/* date-info{width:160px;
height:28px;
line-height:28px;
Text-align:center;
Position:absolute;
top:230px;
left:120px;
Z-index:11;
Color: #555;
Font-weight:bold;
font-family: ' Microsoft Ya-hei ';
}. time-info{width:92px;
height:30px;
line-height:30px;
Text-align:center;
Position:absolute;
top:270px;
left:154px;
Z-index:11;
Background-color: #555;
padding:0;
box-shadow:0px 0px 9px 2px #222 inset;
}. time{width:30px;
height:30px;
Text-align:center;
Float:left;
Color: #fff;
Font-weight:bold;
#minute-time{border-left:1px solid #fff;
border-right:1px solid #fff;
}/* Scale */clock-scale{width:195px;
height:2px;
transform-origin:0% 50%;
Z-index:7;
Position:absolute;
top:199px;
left:200px; }. scale-show{width:12px;
height:2px;
Background-color: #555;
Float:left;
}. scale-hidden{width:183px;
height:2px;
Float:left;
}
JavaScript section
JS part of nothing to say, simple DOM operation, setinterval function every second, modify the angle of the pointer and display time. The code is as follows
(function () {WINDOW.ONLOAD=INITNUMXY (200, 160, 40,40);
var hour_line = document.getElementById ("Hour-line");
var minute_line = document.getElementById ("Minute-line");
var second_line = document.getElementById ("Second-line");
var date_info = document.getElementById ("Date-info");
var week_day = [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '];
var hour_time = document.getElementById ("Hour-time");
var minute_time = document.getElementById ("Minute-time");
var second_time = document.getElementById ("Second-time");
function settime () {var this_day = new Date ();
var hour = (This_day.gethours () >= 12)?
(This_day.gethours ()): This_day.gethours ();
var minute = This_day.getminutes ();
var second = This_day.getseconds ();
var hour_rotate = (hour*30-90) + (Math.floor (MINUTE/12) * 6);
var year = This_day.getfullyear ();
var month = ((This_day.getmonth () + 1) < 10)? "0" + (thIs_day.getmonth () + 1): (This_day.getmonth () + 1);
var date = (This_day.getdate () < 10)?
"0" +this_day.getdate (): This_day.getdate ();
var day = This_day.getday ();
Hour_line.style.transform = ' rotate (' + hour_rotate + ' deg ');
Minute_line.style.transform = ' rotate (' + (minute*6-90) + ' deg ');
Second_line.style.transform = ' rotate (' + (second*6-90) + ' deg ');
date_info.innerhtml = year + "-" + month + "-" + Date + "" + week_day[day];
hour_time.innerhtml = (this_day.gethours () < 10)?
"0" + this_day.gethours (): This_day.gethours ();
minute_time.innerhtml = (this_day.getminutes () < 10)?
"0" + this_day.getminutes (): This_day.getminutes ();
second_time.innerhtml = (This_day.getseconds () < 10)?
"0" + this_day.getseconds (): This_day.getseconds ();
} setinterval (settime, 1000); function Initnumxy (R, R, W, h) {var numxy = [{left]: R + 0.5 * r-0.5 * W, "top": R-0.5 * r * 1.73205-0.5 * H}, {"Left": R + 0.5 * R * 1
.73205-0.5 * W, "top": R-0.5 * r-0.5 * H}, {"Left": R + r-0.5 * W, ' Top ': R-0.5 * H}, {' Left ': R + 0.5 * r * 1.73205-0.5 * W, ' top ': R + 0 .5 * r-0.5 * H}, {"Left": R + 0.5 * r-0.5 * W, "top": R + 0.5 * r * 1.732-0
.5 * H}, {"Left": R-0.5 * W, "top": R + r-0.5 * H}, { "Left": R-0.5 * r-0.5 * w, ' top ': R + 0.5 * r * 1.732-0.5 * H}, {"Left" : R-0.5 * R * 1.73205-0.5 * W, "top": R + 0.5 * r-0.5 * H}, {"Left": r-r
-0.5 * W, "top": R-0.5 * H}, {"Left": R-0.5 * R * 1.73205-0.5 * W, "Top": R-0.5 * R -0.5 * H}, {"Left": R-0.5 * r-0.5 * w, ' top ': R-0.5 * R * 1.73205-0.5 *
H}, {"Left": R-0.5 * W, "top": r-r-0.5 * H}];
var clock = document.getElementById ("clock"); for (var i = 1; I <= i++) {if (i%3 = 0) {clock.innerhtml + + <div class= ' clock-num em_num ' >
"+i+" </div> ";
else {clock.innerhtml + = "<div class= ' Clock-num ' >" + i + "</div>";
} var clock_num = Document.getelementsbyclassname ("Clock-num");
for (var i = 0; i < clock_num.length i++) {clock_num[i].style.left = numxy[i].left + ' px ';
Clock_num[i].style.top = numxy[i].top + ' px ';
for (var i = 0; i < i++) {clock.innerhtml = "<div class= ' Clock-scale ' >" + "<div class= ' Scale-hidden ' ></div>" + "<div class= ' scalE-show ' ></div> ' + "</div>";
var scale = Document.getelementsbyclassname ("Clock-scale");
for (var i = 0; i < scale.length i++) {scale[i].style.transform= "rotate (" + (I * 6-90) + "deg)";
}
}
})();
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
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
