标签：index 色子 .. point 微信 title 程序 index1 data

文章目录

• 前言
• 代码：
• • 1、wxml
  • 2、wxss
  • 3.js
  • 页面效果

前言

甲乙双方摇色子，谁的点数大 谁赢

代码：

1、wxml

页面布局

<view class="out_wrap">
  <text>甲:</text>
  <text>乙</text>

<view class="fist_result">
<image src="{{img[index].index}}"></image>
<!-- <text>{{resultText}}</text> -->
<image src="{{img[index1].index}}"></image>

</view>
<view class="button_wrap">
<view class="title">{{title}}</view>
<button bindtap="btnStart">开始</button>
<button bindtap="btnEnd">结束</button>
</view>
</view>

2、wxss

页面样式

image {
  width: 100px;
  height: 100px;
}

.out_wrap {
  width: 100vw;
  height: 100vh;
  text-align: center;
  padding-top: 20rpx;
  background: rgba(3, 29, 11, 0.6);
}


.out_wrap text{
color: #fff;

}
.fist_result {
  /* 弹性盒子 */
  display: flex;
 /* 垂直方向的对齐方式 */
  align-items: center;
  height: 300rpx;
  background: rgb(18, 150, 219, 0.1);

}
.fist_result image {
  /* 外边距 */
  margin: 0 76rpx;
}
.button_wrap button {
  /* 行内块 */
  display: inline-block;
  /* 权重  优先级*/
  width: 36vw !important;
  margin: 0 30rpx !important;
}
.title {
  height: 100rpx;
  width: 400rpx;
  margin: 20rpx auto;
  font-size: 40rpx;
  line-height: 100rpx;
  text-align: center;
  border-radius: 10rpx;
  background: rgba(219, 18, 102, 0.1);
  color: #fff;
}

3.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 图片列表
    img: [{
        index: "../../point/1-point.png"
      },
      {
        index: "../../point/2-point.png"
      },
      {
        index: "../../point/3-point.png"
      },
      {
        index: "../../point/4-point.png"
      },
      {
        index: "../../point/5-point.png"
      },
      {
        index: "../../point/6-point.png"
      },

    ],
    index: 0, //存储下标
    index1: 1, //存储下标
    timer: "", //存储计时器
    timers: true, //防止连续点击 类似防抖
    title: "?" //判断文本
  },
//随机获取点数
  li(a) {
    // console.log(a)
    // 获取向下取整随机数
    this.data.index = Math.floor(Math.random() * 6)
    this.data.index1 = Math.floor(Math.random() * 6)
    // 更新数据
    this.setData({
      index: this.data.index,
      index1: this.data.index1
    })
    // console.log(this.data.img[0])

  },
  // 开始按钮
  btnStart() {
    // 防止连续点击
    // clearInterval(this.data.timer)
    // 判断this.data.timers ，
    // this.data.timers 为true执行操作，为false则不执行操作
    if (this.data.timers) {
    this.data.timers = false
      //隔100毫秒换一张图
      console.log("0"+" ")
      this.data.timer = setInterval(() => {
        this.li()
      }, 100)
   }

  },
  // 停止按钮
  btnEnd() {
    // 延时器
   
        // 停止计时器
   
    clearInterval(this.data.timer)
    this.data.timers = true
    // console.log(this.data.index + 1, this.data.index1 + 1)
    // 判断图片点数大小
    if (this.data.index  > this.data.index1 ) {
      // 当index>index1时渲染展示值
      this.data.title = "甲赢了！"
    
      // console.log(this.data.title)
    } else if (this.data.index  == this.data.index1 ) {

      this.data.title = "平局了！"
     
      console.log(this.data.title)
    } else {
      this.data.title = "乙赢了！"
    
    } 
    // 更新数据 
    this.setData({
        title: this.data.title
      })

  
  },

页面效果

标签：index,色子,..,point,微信,title,程序,index1,data
来源： https://blog.csdn.net/qq_45126531/article/details/122618665

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。