Use css+native js to make simple clocks. The effect is as follows
To achieve this effect, it is divided into three major parts: html, javascript, and css
html part
The html part is relatively simple, defining a clock div, which has the origin, hour, minute, second hand, date and time. As for the scales, numbers and other elements on the clock, because the quantity is relatively large, it is generated using jvascript using jvascript.
<!doctype html><html><head> <meta charset="UTF-8"> <link rel='stylesheet' href='External css file path' /> <title>Clock</title></head><body> <div id="clock"> <!-- Origin--> <div></div> <!-- Hour-minute Second-hand--> <div id="hour-line"></div> <div id="minute-line"></div> <div id="second-line"></div> <!-- Date--> <div id="date-info"></div> <!-- Time--> <div > <div id="hour-time"></div> <div id="minute-time"></div> <div id="second-time"></div> </div> </div> </div><script type='text/javascript' src='External javascript file path'></script></body></html>
CSS part
Before starting the code, there are some properties of css that need to be understood, such as positioning, border-radius, transformation, etc.
position attributes
The position attribute specifies the positioning type of an element, with five values: absolute, fixed, relative, static, inherit. The default is static, that is, there is no positioning, and the elements are displayed according to the normal document flow; the main uses here are absolute and relative
Absulte value, set the element to absolute positioning, and position it relative to the first upper element that unexpectedly positioned statically. The position can be positioned through the 'left', 'top', 'right', 'bottom' attributes; if the upper element is all statically positioned, it will be positioned relative to the position of the body element.
In this example, set the outermost div clock to relative, and all lower elements are set to absolute absolute positioning, and then determine its position relative to clock by setting the values of attributes such as left and top.
border-radius attribute
The border-radius attribute adds a rounded border to an element. You can set the size of four rounded corners. In this example, use this attribute to set the clock element to a circle
Here is an example: 4 div elements, all width and height are 100px, and the effects of border-radius are different:
transform attribute
The transform property applies a 2D or 3D rotation to an element, which allows us to rotate, scale, move, or tilt the element. In this example, the hour, minute, second, scale, etc. are all rotated using the transform attribute; in addition, the transform-origin attribute can set the base point position of the element.
The code for the css part
/* 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 Yahei';}.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 #ffff; border-right:1px solid #ffff;}/* 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 part
There is nothing to say about the js part. For simple dom operations, the setInterval function is executed every second, and the angle of the pointer and the display time are just changed. 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', 'Tue', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday' '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() - 12) : 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 + 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 + 0.5 * r * 1.732 - 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 - 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 - 0.5 * 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 * h }, { "left" : R - 0.5 * r - 0.5 * w, "top" : R - 0.5 * r * 1.73205 - 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 * 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 <= 12; 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 < 60; 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 all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.