<section>
<div class="clock" data-format='12'>
<h1>00 : 00 : 00 AM</h1>
</div>
<div class="format">
<h1>时间格式</h1>
<button data-format='12'>12小时</button>
<button data-format='24'>24小时</button>
</div>
</section>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Orbitron", sans-serif;
font-size: 30px;
}
section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(2, 15, 32);
flex-direction: column;
text-align: center;
}
section .clock {
border-radius: 8px;
color: cyan;
}
.format {
color: aquamarine;
font-size: 20px;
margin: 30px 0;
}
.format button {
display: inline-block;
border: none;
outline: none;
font-size: 18px;
padding: 10px 20px;
font-family: "Orbitron";
border-radius: 4px;
cursor: pointer;
margin: 10px;
}
JS
格式化
const clockEl = document.querySelector(".clock");
const buttons = document.querySelectorAll(".format button");
setInterval(generateTime, 1000);
// console.log(date)
function generateTime() {
const format = clockEl.getAttribute("data-format");
const date = new Date();
let hour = date.getHours();
let timeStatus;
const min = date.getMinutes();
const sec = date.getSeconds();
timeStatus = hour > 12 ? "PM" : "AM";
if (format === "12") {
hour = hour > 12 ? hour % 12 : hour;
}
clockEl.innerHTML = `<h1>${hour} : ${min} : ${sec} ${timeStatus}</h1>`;
}
buttons.forEach((button) => {
button.addEventListener("click", () => {
const format = button.getAttribute("data-format");
clockEl.setAttribute("data-format", format);
generateTime();
});
});