html頁面代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>顏色選擇器</title><style>body {font-family: "Microsoft YaHei", sans-serif;padding: 20px;}.color-icon {width: 14px;height: 14px;cursor: pointer;}.color-picker {display: none;grid-template-columns: repeat(9, 10px);gap: 5px;margin: 10px 0;}.color-box {width: 10px;height: 10px;cursor: pointer;border: 2px solid #ccc;border-radius: 4px;}#text {font-size: 18px;margin-top: 20px;}</style>
</head>
<body><h2>點擊圖標選擇顏色：</h2><!-- 圖標 -->
<img src="./images/auto.png" alt="選擇顏色" class="color-icon" id="togglePicker"><!-- 顏色選擇器 -->
<div class="color-picker" id="colorPicker"></div><!-- 正文 -->
<div id="text">這是正文內容，點擊顏色塊來更改我的顏色。</div><script>const togglePicker = document.getElementById('togglePicker');const colorPicker = document.getElementById('colorPicker');const text = document.getElementById('text');const container = document.createElement('div');container.style.display = 'inline-block';togglePicker.parentNode.insertBefore(container, togglePicker);container.appendChild(togglePicker);container.appendChild(colorPicker);// 點擊圖標時顯示顏色選擇器togglePicker.addEventListener('click', () => {colorPicker.style.display = 'grid';});// 鼠標移出圖標和顏色選擇區域后隱藏顏色選擇器container.addEventListener('mouseleave', () => {colorPicker.style.display = 'none';});// 設置顏色塊const colors = ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FFFFFF', '#FF0000', '#FF6600', '#FFFF00','#00FF00', '#00FFFF', '#0000FF', '#9900FF', '#FF00FF', '#FF9999', '#FFCC99', '#FFFF99', '#CCFFCC','#CCFFFF', '#CCCCFF', '#FFCCFF', '#660000', '#996600', '#666600', '#006600', '#006666', '#000066','#660066', '#990000', '#FF9900', '#99CC00', '#009933', '#33CCCC', '#3399FF', '#9966FF', '#CC3366','#CC0000', '#CC6600', '#999900', '#009900', '#0099CC', '#0000CC', '#9900CC', '#CC0066', '#333300'];colors.forEach(color => {const box = document.createElement('div');box.className = 'color-box';box.style.backgroundColor = color;box.addEventListener('click', () => {text.style.color = color;});colorPicker.appendChild(box);});colorPicker.style.gridTemplateColumns = 'repeat(9, 10px)';// 跳轉按鈕function url() {window.location.href = "返回.html";}
</script><!-- 跳轉按鈕 -->
<button onclick="url()">跳轉</button></body>
</html>
效果圖：
