文章目录
一个简单数字时钟一个简单数字时钟
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>一个简单的数字时钟</title><style type="text/css">* {box-sizing: border-box;margin: 0;padding: 0;}body {background: linear-gradient(#000000, #841010);/* background-color: #000; */width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}.container {/* border: 1px solid red; */width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;user-select: none;font-family: "courier new";font-size: 120px;font-weight: 600;letter-spacing: 2px;color: rgba(255, 255, 255, 1);}</style></head><body><div class="container"></div></body><script type="text/javascript">window.onload = (event) => {// console.log(event);main();}function main() {const p = document.querySelector(".container");showDatetime(p);window.setInterval(() => {showDatetime(p);}, 1000);}function showDatetime(target) {const date = new Date();console.log(date);console.log(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());const year = date.getFullYear();const month = date.getMonth();const dayOfMonth = date.getDate();const hours = date.getHours();const minutes = date.getMinutes();const seconds = date.getSeconds();dateString = `${year}.${padZero(month, 2, true)}.${padZero(dayOfMonth, 2, true)}`;timeString = `${padZero(hours, 2, true)}:${padZero(minutes, 2, true)}:${padZero(seconds, 2, true)}`;// target.innerText = `${dateString} ${timeString}`;target.innerText = `${timeString}`;console.log(target.innerText);}function padZero(target, targetLength, atStart) {if (typeof target === "number") {if (target < 10) {target = target.toString();} else {return target;}}if (target.length === targetLength) {return target;}if (atStart === true) {return target.padStart(targetLength, "0");} else {return target.padEnd(targetLength, "0");}}</script></html>
