小案例：页面上摆一首诗，每行颜色随机乱蹦，隔几秒自己变一次，点按钮也能手动换。扩展——让标题跟着第一行诗一起变色。
第一，随机数的用法。Math.random()生成的是[0, 1)的小数，要想变成 0~15 的整数，得配Math.floor()往下取整。
第二，十六进制颜色的拼法。颜色本质上是#加上 6 位十六进制字符。与其用现成的颜色库，不如自己拿'0123456789ABCDEF'这个字符集拼，既直观又能顺便复习一下进制。
第三，定时刷新 + 数据驱动视图。setInterval负责周期性触发，this.setData()负责把新颜色推给页面。小程序不像网页那样能直接操作 DOM，所有界面变化都得走setData这条路。
最终效果
页面上显示《望庐山瀑布》的标题、作者、四行正文
每行诗颜色随机，可能撞色也可能各不相同
每隔 5 秒自动换一批颜色
点"改变颜色"按钮，立刻换
控制台每次打印一个长度为 4 的数组，四个元素就是四行诗的颜色
扩展：标题颜色跟着第一行诗同步变化，自动和手动都生效。
主要代码：
<!--index.wxml--> <navigation-bar title="自动随机变化的颜色" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <!-- 标题用 colors[0]，与第一行诗同色 --> <view class="title" style="color:{{colors[0]}}">望庐山瀑布</view> <view class="subtitle">李白</view> <view class="flex-wrap"> <view style="color:{{colors[0]}}">日照香炉生紫烟，</view> <view style="color:{{colors[1]}}">遥看瀑布挂前川。</view> <view style="color:{{colors[2]}}">飞流直下三千尺，</view> <view style="color:{{colors[3]}}">疑是银河落九天。</view> </view> <button type="primary" bind:tap="changeColor">改变颜色</button> </view> </scroll-view>/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .flex-wrap { margin-top: 40rpx; font-size: 40rpx; text-align: center; line-height: 2em; letter-spacing: 1em; } button { margin-top: 40rpx; margin-bottom: 40rpx; }// index.js Page({ data: { colors: [] }, // 页面加载 onLoad() { // 首次先来一批颜色 this.createColor(); // 每 5 秒刷新一次 setInterval(() => { this.createColor(); }, 5000); }, // 点击按钮 changeColor() { this.createColor(); }, // 生成 4 种随机颜色 createColor() { let colors = []; // 十六进制字符集 const letters = '0123456789ABCDEF'; // 外层：生成 4 种颜色 for (let i = 0; i < 4; i++) { // 颜色开头的 # let c = '#'; // 内层：每种颜色拼 6 位 for (let j = 0; j < 6; j++) { c += letters[Math.floor(Math.random() * 16)]; } colors.push(c); } // 控制台打印 console.log(colors); // 更新数据，驱动视图 this.setData({ colors }); } });结果展示：
