第224练最终效果：
代码实现过程：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta http-equiv=”X-UA-Compatible” content=”IE=edge” /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><link rel=”stylesheet” href=”index.css” /><title>第224练</title></head><body><div class=”clock”><div class=”numbers”><div class=”twelve”>12</div><div class=”three”>3</div><div class=”six”>6</div><div class=”nine”>9</div></div><div class=”arrows”><div class=”hour”></div><div class=”minute”></div><div class=”second”></div></div><imgsrc=”Rolex_logo.svg.png”alt=””/></div><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;padding: 0;font-family: ‘Courier New’, Courier, monospace;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #fafafa;}img {position: absolute;top: 60px;left: 50%;transform: translateX(-50%);width: 70px;z-index: 2;}.clock {width: 350px;height: 350px;background-color: lightgray;border-radius: 100%;border: 5px solid darkgrey;box-shadow: 1px 1px 4px rgba(0,0,0,.7);position: relative;}.numbers div {position: absolute;font-size: 27px;font-weight: bold;color: lightgoldenrodyellow;text-shadow: 1px 1px 2px rgba(0,0,0,.7);}.twelve {top: 6px;left: 50%;transform: translateX(-50%);}.three {right: 6px;top: 50%;transform: translateY(-50%);}.six {bottom: 6px;left: 50%;transform: translateX(-50%);}.nine {left: 6px;top: 50%;transform: translateY(-50%);}.arrows {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.arrows::before {content: “”;width: 25px;height: 25px;background-color: darkgreen;border-radius: 50%;box-shadow: 1px 1px 2px rgba(0,0,0,.7);z-index: 4;}.arrows div {width: 7px;height: 120px;background-color: white;position: absolute;bottom: 50%;box-shadow: 1px 1px 2px rgba(0,0,0,.7);border-radius: 50% 50% 0 0;transform-origin: bottom center;z-index: 3;}.arrows .hour {height: 80px;transform: rotate(30deg);}.arrows .second {background-color: goldenrod;transform: rotate(250deg);}
JS:
const hour = document.querySelector(“.hour”);const minute = document.querySelector(“.minute”);const second = document.querySelector(“.second”);function setDate() {const now = new Date();const getSecond = now.getSeconds();const getMinute = now.getMinutes();const getHour = now.getHours();const secondDegree = (getSecond / 60) * 360;const minuteDegree = (getMinute / 60) * 360;const hourDegree = (getHour / 12) * 360;second.style.transform = `rotate(${secondDegree}deg)`;minute.style.transform = `rotate(${minuteDegree}deg)`;hour.style.transform = `rotate(${hourDegree}deg)`;}setInterval(setDate, 1000);
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
