扔骰子微信小程序案例

最新推荐文章于 2023-07-03 17:59:54 发布

玩机科技社

最新推荐文章于 2023-07-03 17:59:54 发布

阅读量2k

点赞数 1

分类专栏：小程序服务器文章标签：前端

本文链接：https://blog.csdn.net/m0_58782029/article/details/129200005

版权

服务器同时被 2 个专栏收录

48 篇文章 8 订阅

订阅专栏

小程序

7 篇文章 3 订阅

订阅专栏

该代码示例展示了一个简单的微信小程序页面，包含一个骰子图像和结果显示区。当用户点击骰子时，程序会生成一个1到6之间的随机数，更新骰子图片和显示的点数结果。

摘要由CSDN通过智能技术生成

只有index界面所以直接

1，wxml

<view class="container">
  <view class="dice-area">
    <image class="dice" src="{{diceImage}}" bindtap="rollDice" />
  </view>
  <view class="result">{{result}}</view>
</view>

2，wxss

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  
  .dice-area {
    margin-bottom: 30px;
  }
  
  .dice {
    width: 200px;
    height: 200px;
  }
  
  .result {
    font-size: 28px;
    color: #333;
  }

3，js

Page({
    data: {
      diceImage: '/images/dice-1.png',
      result: '',
      diceList: ['/images/dice-1.png', '/images/dice-2.png', '/images/dice-3.png', '/images/dice-4.png', '/images/dice-5.png', '/images/dice-6.png']
    },
  
    rollDice: function() {
      const index = Math.floor(Math.random() * this.data.diceList.length);
      const diceImage = this.data.diceList[index];
      const result = `点数为：${index + 1}`;
      this.setData({
        diceImage: diceImage,
        result: result
      });
    }
  })