小案例页面上摆一首诗每行颜色随机乱蹦隔几秒自己变一次点按钮也能手动换。扩展——让标题跟着第一行诗一起变色。第一随机数的用法。Math.random()生成的是[0, 1)的小数要想变成 0~15 的整数得配Math.floor()往下取整。第二十六进制颜色的拼法。颜色本质上是#加上 6 位十六进制字符。与其用现成的颜色库不如自己拿0123456789ABCDEF这个字符集拼既直观又能顺便复习一下进制。第三定时刷新 数据驱动视图。setInterval负责周期性触发this.setData()负责把新颜色推给页面。小程序不像网页那样能直接操作 DOM所有界面变化都得走setData这条路。最终效果页面上显示《望庐山瀑布》的标题、作者、四行正文每行诗颜色随机可能撞色也可能各不相同每隔 5 秒自动换一批颜色点改变颜色按钮立刻换控制台每次打印一个长度为 4 的数组四个元素就是四行诗的颜色扩展标题颜色跟着第一行诗同步变化自动和手动都生效。主要代码!--index.wxml-- navigation-bar title自动随机变化的颜色 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox !-- 标题用 colors[0]与第一行诗同色 -- view classtitle stylecolor:{{colors[0]}}望庐山瀑布/view view classsubtitle李白/view view classflex-wrap view stylecolor:{{colors[0]}}日照香炉生紫烟/view view stylecolor:{{colors[1]}}遥看瀑布挂前川。/view view stylecolor:{{colors[2]}}飞流直下三千尺/view view stylecolor:{{colors[3]}}疑是银河落九天。/view /view button typeprimary bind:tapchangeColor改变颜色/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 }); } });结果展示