最近在学习JavaScript，为了巩固 HTML、CSS 和 JavaScript 的综合运用，我动手做了一个简单的“点击计数器”练习作品。它不仅仅是一个计数器，还加入了主题定制和圆角调节的功能，让这个小工具既有实用性，又能展示 CSS 变量与 JavaScript 的配合。本文将介绍这个作品的设计思路、实现细节以及遇到的一些小挑战。

作品概览

打开页面，首先看到的是两个按钮：“开始”和“设置”。

开始：进入计数模式，屏幕上显示当前点击次数，并出现“增加”和“重置”按钮。此时“开始”按钮变为“结束”，可随时终止计数。
结束：点击后显示计数结果，并提示“我知道了”，返回初始界面。
设置：进入设置面板，可以拖拽滑块调整整个界面的圆角大小，也可以通过颜色按钮切换主题色（黑、蓝、红、绿、橙）。设置完成后点击“完成”返回初始界面。

底部展示作品信息和作者。

技术栈

HTML5：语义化结构，使用 div 组织不同状态的界面。
CSS3：自定义属性（变量）、color-mix 函数、Flexbox 布局、自定义滑块样式。
JavaScript：原生 DOM 操作、事件监听、界面切换逻辑。

实现细节

1. 结构设计

页面主体是一个 .box 容器，内部包含三个主要的功能区块：

#playing：计数过程中的界面（显示数字、增加/重置按钮）。
#stop：计数结束后的结算界面（显示总次数）。
#set：设置界面（圆角滑块、主题色按钮）。

初始状态下，只有两个引导按钮显示，其他区块通过 CSS 的 display: none 隐藏。JavaScript 负责在合适的时机切换它们的显示状态。

2. 主题与圆角管理

CSS 变量定义

在 :root 中定义了一系列变量，方便全局统一修改：

:root {
  --primary: #000000;            /* 写了很详细的注释 */
  --primary1: rgba(0,0,0,0.1);
  --text: color-mix(in srgb, var(--primary1) 10%, #000000);
  --border-color: var(--primary1);
  --border-radius: 8px;
  /* 等等 */
}

特别值得一提的是使用了 CSS 的 color-mix 函数，它可以基于主题色自动生成更浅或更深的颜色，例如文字色、边框色等，减少了手动定义多种颜色的麻烦。

圆角滑块

滑块是一个 <input type="range">，通过监听其 input 事件，将当前值赋给 --border-radius 变量，并实时更新显示数值。同时，为了美化滑块，自定义了 ::-webkit-slider-runnable-track 和 ::-webkit-slider-thumb 等伪元素，使其在不同浏览器下都能有不错的视觉效果。

radiusSlider.addEventListener('input', (e) => {
  const val = e.target.value;
  document.documentElement.style.setProperty('--border-radius', val + 'px');
  radiusSpan.textContent = val;
});

主题色切换

给每个颜色按钮添加点击事件，从 data-color 属性中取出颜色值，然后修改 --primary 变量。由于其他颜色都是基于 --primary 通过 color-mix 计算得到的，所以只需改变这一个变量，整个页面的配色就会自动刷新。

colorButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    const color = btn.getAttribute('data-color');
    document.documentElement.style.setProperty('--primary', color);
  });
});