დაყენების ინსტრუქცია: ქვემოთ მოყვანილი სკრიპტი ჩასვით საიტის ბლოკში
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title>CodePen - HTML Clock</title> <link rel="canonical" href="https://codepen.io/sean_cotton/pen/rvpbQz"> <style> div { border: 1px solid transparent; } /* -- The outside rim of the clock with gradient -- */ #clock-rim { display: block; position: relative; width: 300px; height: 300px; background: linear-gradient(gray, black); border-radius: 150px; } /* -- Clock's face -- */ #clock-face { display: block; position: relative; width: 260px; height: 260px; margin: 19px auto; border-radius: 150px; background: white; } /* -- Second hand -- */ #second { position: absolute; top: 123px; left: 128px; width: 100px; height: 2px; border: 1px solid transparent; border-radius: 5px; transform: unset; background: green; transform-origin: 1px 1px; } /* -- Minute hand -- */ #minute { position: absolute; top: 123px; left: 128px; width: 100px; height: 4px; border: 1px solid transparent; border-radius: 5px; transform: unset; background: red; transform-origin: 2px 2px; } /* -- Hour hand -- */ #hour { position: absolute; top: 123px; left: 128px; width: 50px; height: 4px; border: 1px solid transparent; border-radius: 5px; transform: unset; background: blue; transform-origin: 2px 2px; } /* -- Center of the clock -- */ #center { position: absolute; top: 118px; left: 120px; width: 16px; height: 16px; background: white; border: 1px solid gray; border-radius: 16px; } /* -- "HTML clock" in a box -- */ #brand { position: absolute; top: 110px; left: 165px; border: 1px solid gray; border-radius: 5px; width: 50px; height: 40px; font-family: Verdana; font-size: 11px; text-align: center; line-height: 20px; } /* -- Notches container -- */ #notch-container { width: 260px; height: 260px } /* -- Hourly notch (thicker, but sparse) -- */ .notch { position: absolute; width: 10px; height: 2px; background: black; border-radius: 5px 5px 5px 5px; } /* -- Minute notch (thin) -- */ .thin { position: absolute; width: 10px; height: 1px; border-top: 1px solid gray; } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <div id = "clock-rim"> <div id = "clock-face"> <div id = "notch-container"></div> <div id = "brand">HTML<br/>clock</div> <div id = "hour"></div> <div id = "minute"></div> <div id = "second"></div> <div id = "center"></div> </div> </div> <script id="rendered-js" > /* -- Convert degrees to radians (actually unused here :-) -- */ function deg2rad(d) {return 2 * d / 360 * Math.PI;} /* -- Progress the clock's hands every once in a while -- */ setInterval(() => { let minute = document.getElementById("minute"); let hour = document.getElementById("hour"); let second = document.getElementById("second"); /* -- note retracing by 90 degrees, this is just the way I calculated the hands, the "0" angle is at 3PM, not 12PM, -- */ let S = new Date().getSeconds() * 6 - 90; let M = new Date().getMinutes() * 6 - 90; let H = new Date().getHours() * 30 - 90; second.style.transform = 'rotate(' + S + 'deg)'; minute.style.transform = 'rotate(' + M + 'deg)'; hour.style.transform = 'rotate(' + H + 'deg)'; }, 10); /* -- update the clock fast enough -- */ /* -- Helps calculate the angle of each hand on the clock -- */ function vec2ang(x, y) { angleInRadians = Math.atan2(y, x); angleInDegrees = angleInRadians / Math.PI * 180.0; return angleInDegrees; } /* -- Let's calculate position and angle of clock's notches-- */ let nc = document.getElementById("notch-container"); let angle = 0; let rotate_x = 120; let rotate_y = 0; /* -- Calculate the 60 notches for seconds and minutes -- */ for (let i = 0; i < 60; i++) { let thin = document.createElement("div"); let x = rotate_x * Math.cos(angle) - rotate_y * Math.cos(angle); let y = rotate_y * Math.cos(angle) + rotate_x * Math.sin(angle); let r = vec2ang(x, y); thin.className = "thin"; thin.style.left = 122 + x + "px"; thin.style.top = 127 + y + "px"; thin.style.transform = "rotate(" + r + "deg)"; nc.appendChild(thin); angle += Math.PI / 300 * 10; } // reset angle parameters angle = 0;rotate_x = 120;rotate_y = 0; /* -- Calculate the thicker notches for hour hand -- */ for (let i = 0; i < 12; i++) { let notch = document.createElement("div"); let x = rotate_x * Math.cos(angle) - rotate_y * Math.cos(angle); let y = rotate_y * Math.cos(angle) + rotate_x * Math.sin(angle); let r = vec2ang(x, y); notch.className = "notch"; notch.style.left = 122 + x + "px"; notch.style.top = 127 + y + "px"; notch.style.transform = "rotate(" + r + "deg)"; nc.appendChild(notch); angle += Math.PI / 60 * 10; } //# sourceURL=pen.js </script> </body> </html>
დააკოპირეთ
