第226练数码时钟效果：
完整代码实现过程：
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″ /><title>第226练</title><link rel=”stylesheet” href=”index.css” /></head><body><h2>第226练-数码时钟</h2><div class=”clock”><div><span id=”hour”>00</span><span class=”text”>Hours</span></div><div><span id=”minutes”>00</span><span class=”text”>Minutes</span></div><div><span id=”seconds”>00</span><span class=”text”>Seconds</span></div><div><span id=”ampm”>AM</span></div></div><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;font-family: sans-serif;display: flex;flex-direction: column;align-items: center;height: 100vh;justify-content: center;background: url(“226.jpg”);background-size: cover;overflow: hidden;}h2 {text-transform: uppercase;letter-spacing: 4px;font-size: 14px;text-align: center;color: white;}.clock {display: flex;}.clock div {margin: 5px;position: relative;}.clock span {width: 100px;height: 80px;background: slateblue;opacity: 0.8;color: white;display: flex;justify-content: center;align-items: center;font-size: 50px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.clock .text {height: 30px;font-size: 10px;text-transform: uppercase;letter-spacing: 2px;background: darkblue;opacity: 0.8;}.clock #ampm {bottom: 0;position: absolute;width: 60px;height: 30px;font-size: 20px;background: green;}
JS:
const hourEl = document.getElementById(“hour”);const minuteEl = document.getElementById(“minutes”);const secondEl = document.getElementById(“seconds”);const ampmEl = document.getElementById(“ampm”);function updateClock() {let h = new Date().getHours();let m = new Date().getMinutes();let s = new Date().getSeconds();let ampm = “AM”;if (h > 12) {h = h – 12;ampm = “PM”;}h = h < 10 ? “0” + h : h;m = m < 10 ? “0” + m : m;s = s < 10 ? “0” + s : s;hourEl.innerText = h;minuteEl.innerText = m;secondEl.innerText = s;ampmEl.innerText = ampm;setTimeout(() => {updateClock();}, 1000);}updateClock();
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
