JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
$$demo <div class="container"> <div class="hours"> <span class="label"></span> <span class="value"></span> </div> <div class="minutes"></div> <div class="seconds"></div> </div>
<script>
function fillZero(n) {
// 填充为两位数
return n < 10 ? 0${n}
: n
}
function formatHour(hour) {
// 采用 12 小时制
hour = hour % 12
// 12 小时制没有 0 点
return hour == 0 ? 12 : hour
}
function render() {
const now = new Date()
document.querySelector(".label").textContent =
now.getHours() < 12 ? "AM" : "PM"
document.querySelector(".hours .value").textContent = formatHour(
now.getHours()
)
document.querySelector(".minutes").textContent = fillZero(
now.getMinutes()
)
document.querySelector(".seconds").textContent = fillZero(
now.getSeconds()
)
}
render() // 避免开始 1 秒内为 0
setInterval(render, 1000)
</script>
<style> html { background-color: black; min-height: 400px; } .container { position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: min-content;
height: min-content;
display: flex;
align-items: flex-end;
font-size: 20vmin;
gap: 0.2em;
color: #b7b7b7;
}
.hours,
.minutes,
.seconds {
background-color: #0f0f0f;
}
.hours,
.minutes,
.seconds {
border-radius: 0.1em;
width: 1.4em;
text-align: center;
}
.seconds {
font-size: 10vmin;
}
.hours {
position: relative;
}
.hours .label {
position: absolute;
left: 1.5em;
top: 1.5em;
font-size: 2vmin;
}
</style>
$$
$$answer
<div class="container">
<div class="hours">
<span class="label"></span>
<span class="value"></span>
</div>
<div class="minutes"></div>
<div class="seconds"></div>
</div>
<script>
function fillZero(n) {
// 填充为两位数
return n < 10 ? `0${n}` : n
}
function formatHour(hour) {
// 采用 12 小时制
hour = hour % 12
// 12 小时制没有 0 点
return hour == 0 ? 12 : hour
}
function render() {
const now = new Date()
document.querySelector(".label").textContent =
now.getHours() < 12 ? "AM" : "PM"
document.querySelector(".hours .value").textContent = formatHour(
now.getHours()
)
document.querySelector(".minutes").textContent = fillZero(
now.getMinutes()
)
document.querySelector(".seconds").textContent = fillZero(
now.getSeconds()
)
}
render() // 避免开始 1 秒内为 0
setInterval(render, 1000)
</script>
<style>
html {
background-color: black;
}
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: min-content;
height: min-content;
display: flex;
align-items: flex-end;
font-size: 20vmin;
gap: 0.2em;
color: #b7b7b7;
}
.hours,
.minutes,
.seconds {
background-color: #0f0f0f;
}
.hours,
.minutes,
.seconds {
border-radius: 0.1em;
width: 1.4em;
text-align: center;
}
.seconds {
font-size: 10vmin;
}
.hours {
position: relative;
}
.hours .label {
position: absolute;
left: 1.5em;
top: 1.5em;
font-size: 2vmin;
}
</style>
$$