1 <!--index.wxml-->
2 <view class='container'>
3   <text class='finger_guess'>猜拳小游戏</text>
4   <view class='userinfo'>
5   <image class='userinfo-avater' src='{{imagePath}}' background-size='cover'/>
6   <button bindtap='guess'>{{title}}</button>
7   </view>
8 </view>

/**index.wxss**/
.userinfo {display: flex;flex-direction: column;align-items: center;
}.userinfo-avatar {width: 500rpx;height: 500rpx;margin: 40rpx;/* border-radius: 50%; */
}.userinfo-nickname {color: #aaa;
}.usermotto {margin-top: 200px;
}.finger_guessing {color: #F00;font-size: 30px;margin-top: 20px;} 

.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 50rpx 0;box-sizing: border-box;
} 

//index.js
//获取应用实例
var app = getApp()
//  在数组中存在三个图像文件名
var imagePaths = ['../../images/石头.png', '../../images/剪刀.png', '../../images/布.png'];
//  当前图像的索引
var imageIndex = 0;Page({data: {imagePath: imagePaths[0],  //  用于修改image组件显示图像的变量title: '开始',                //  用于改变按钮文本的变量isRunning: false            //  该变量为true，表示图像正在快速切换
  },//  定时器要执行的函数change: function (e) {//  更改当前图像索引,当大于最大索引时，重新设为第一个索引值（已达到循环显示图像的目的）imageIndex=(imageIndex+1)%3;//  修改image组件要显示的图像（改变imagePath变量的值）this.setData({imagePath: imagePaths[imageIndex]})},//  点击按钮要执行的函数guess: function (e) {//  获取isRunning变量的值let isRunning = this.data.isRunning;// 根据是否正在快速切换图像，决定如何修改按钮文本，以及是开启定时器，还是移除定时器if (!isRunning) {this.setData({title: '停止',isRunning: true});//  开启定时器（没100毫秒调用一次change函数）this.timer = setInterval((function () {this.change()}).bind(this), 100);}else {this.setData({title: '开始',isRunning: false});//  移除定时器this.timer && clearInterval(this.timer);}}
})