企业官网建设流程全解析

开源框架应用课程案例笔记。记录《案例 2.10 自动随机变化的颜色》的实现思路，并分享功能扩展：标题颜色与第一行诗的正文颜色相同、定时随机改变。

一、案例效果

这个案例很有趣味性：页面上展示一首诗，包括诗的标题、作者和正文，样式经过设计，显示美观。小程序启动后，每隔几秒钟，诗的每一行颜色都会随机改变一次 —— 每行诗的颜色可能不同，也可能相同，完全由随机数决定。页面上还有一个 “改变颜色” 按钮，点击它，每行诗的颜色也会立刻随机变化。同时在控制台会打印出每行诗的颜色，方便观察验证。

二、实现思路

整个案例的核心是 “随机生成颜色 + 定时更新界面”。实现上可以分成页面结构和逻辑两个部分。

页面结构方面。最外层是一个容器视图，里面依次嵌套了三个视图组件和一个按钮组件。第一个视图显示诗的标题，第二个视图显示作者，第三个视图是诗的正文部分，正文内部又嵌套了四个视图，每个视图显示一行诗。这样每行诗都能独立设置颜色。诗的颜色是通过行内样式动态绑定的，这样每次颜色值变化时，界面就能即时刷新，而不需要重写样式文件。按钮绑定了一个点击事件，用来手动触发换色。

逻辑方面是重点。首先是随机颜色的生成：小程序里可以用随机数函数生成 0 到 1 之间的随机小数，再乘以 256 并向下取整，就得到 0 到 255 的数值，分别作为红、绿、蓝三个颜色分量，最后转成十六进制拼接成完整的颜色值。每次生成一行诗的颜色就调用一次这个函数，四行诗就得到四种颜色。

然后是定时变化：在页面加载的生命周期函数里，先立即执行一次换色，让页面一开始就显示彩色的诗，然后开启一个定时器，每隔 5 秒自动执行一次换色函数。页面卸载时记得清除定时器，避免页面销毁后定时器还在后台运行。

最后是按钮点击：按钮绑定的事件处理函数和定时器调用的是同一个换色函数，所以无论是自动定时还是手动点击，走的都是同一套换色逻辑，界面效果完全一致。每次换色完成后，把四种颜色组成一个数组打印到控制台，数组有四个元素，每个元素对应一行诗的颜色。

三、功能扩展

在基本功能之上，我完成了一项扩展：标题的颜色也定时随机改变，并且跟第一行诗的正文颜色相同；点击 “改变颜色” 按钮时，标题颜色也随之改变。

实现方式很简洁：换色函数生成四个颜色时，把第一个颜色同时赋值给标题和第一行诗，这样标题和第一行诗始终保持一致，而且无论是定时触发还是按钮触发，标题颜色都会同步更新。这个小改动让整个页面的色彩变化更有整体感，视觉上也更协调。

四、运行效果

编译运行后，页面立即显示出一首颜色各异的诗。等待 5 秒，四行诗的颜色整体换一批，再等 5 秒又换一批，周而复始。期间点击 “改变颜色” 按钮，颜色也会立刻刷新。打开调试器的 Console 面板，每隔 5 秒就能看到一行数组输出，数组里的四个颜色值分别对应四行诗的当前颜色，和界面显示完全一致。标题颜色始终跟随第一行诗，变化同步，功能扩展验证正常。

五、总结

通过这个案例，我掌握了几项核心知识：一是随机数的使用，随机函数配合向下取整可以生成任意范围内的整数，这是生成随机颜色的基础；二是定时器的用法，周期性地执行某个函数，实现自动变化的效果，同时要注意在页面卸载时清理定时器；三是数据绑定和动态样式，颜色值通过数据绑定驱动界面更新，让 “数据变、界面跟着变” 变得非常自然；四是事件绑定，按钮点击与定时器共用同一套逻辑，代码简洁且不易出错。这个案例虽然小巧，但把随机数、定时器、数据绑定和事件处理这几个小程序开发的基础能力完整串联了一遍，收获很大。