【前端教程】用 JavaScript 实现4个常用时间与颜色交互功能
在前端开发中，时间处理（如时钟、倒计时）和动态样式（如随机颜色）是基础且高频的需求。本文将通过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}