随机切换背景颜色

最新推荐文章于 2024-04-19 15:48:00 发布

前端_李嘉豪

最新推荐文章于 2024-04-19 15:48:00 发布

阅读量2.3k

点赞数 2

分类专栏：小程序微信小程序开发文章标签：随机颜色随机数微信小程序

本文链接：https://blog.csdn.net/weixin_42460570/article/details/83416541

版权

小程序同时被 2 个专栏收录

47 篇文章 2 订阅

订阅专栏

微信小程序开发

23 篇文章 5 订阅

订阅专栏

思路很简单用 background: rgba({{r}}, {{g}}, {{b}}, {{a}}) 给这四个变量0~255之间的随机整数即可

html

<view style="height:200px;width: 200px;  background: rgba({{r}}, {{g}}, {{b}}, {{a}})">

</view>
<view class="btn-area">
    <button size="mini" bindtap="tap">changeColour</button>
</view>

Page({
  data: {
    r: 150,
    g: 150,
    b: 150,
    a: 150
  },
  tap: function (e) {
    this.setData({
      r: Math.floor(Math.random() * 255),
      g: Math.floor(Math.random() * 255),
      b: Math.floor(Math.random() * 255),
      a: Math.floor(Math.random() * 255),
      
    });
  },
 
})