在前端开发中，时间处理（如时钟、倒计时）和动态样式（如随机颜色）是基础且高频的需求。本文将通过4个实战案例，从原理拆解到代码实现，带你掌握Date对象、setInterval定时器、Math随机方法的核心用法，每个案例都包含完整代码与关键知识点解析，适合前端初学者入门学习。
案例1：获取当前时间并格式化输出
需求说明
编写函数，通过JavaScript的Date对象获取当前时间，最终以 “2222年 02月11日 11:09:01 星期X” 的格式展示（需处理“补零”和“星期映射”问题）。
核心知识点
- Date对象：JavaScript中处理时间的内置对象，可获取年、月、日、时、分、秒等时间维度。
- 时间补零：月份（0-11）需+1，且所有单个数字的时间单位（如2月→02月、9分→09分）需补“0”。
- 星期映射：
getDay()方法返回0（周日）-6（周六），需通过数组映射为“星期X”格式。
完整代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取当前时间</title>
<script>
// 页面加载完成后执行
window.onload = function() {
getCurrentTime();
};
// 核心函数：获取并格式化当前时间
function getCurrentTime() {
// 1. 创建Date对象，获取当前时间
const now = new Date();
// 2. 提取时间维度（处理月份+1、补零逻辑）
const year = now.getFullYear(); // 年份（如2024）
const month = addZero(now.getMonth() + 1); // 月份（0-11→+1后补零）
const day = addZero(now.getDate()); // 日期（1-31→补零）
const hours = addZero(now.getHours()); // 小时（0-23→补零）
const minutes = addZero(now.getMinutes()); // 分钟（0-59→补零）
const seconds = addZero(now.getSeconds()); // 秒（0-59→补零）
// 3. 处理星期（0=周日→映射为“星期日”）
const weekArr = ["日", "一", "二", "三", "四", "五", "六"];
const week = weekArr[now.getDay()];
// 4. 拼接格式并渲染到页面
const timeStr = `${ year}年 ${ month}月${ day}日 ${ hours}:${ minutes}:${ seconds} 星期${ week}`;
document.getElementById("timeContainer").innerHTML = timeStr;
}
// 辅助函数：单个数字补零（如2→02，10→10）
function addZero(num) {
return num < 10 ? `0${ num}