⼩程序——猜拳游戏
// app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
/
* index.wxss */
.userinfo{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.imageStyle{
width: 500rpx;
height: 500rpx;
margin: 40rpx;
}
<!-- index.wxml -->
<view class='userinfo'>
<text style='textStyle'>猜拳游戏</text>
<view class='userinfo2'>
<image class='imageStyle' src='{{imagePath}}'></image>
<button class='buttonStyle' bindtap='guess'>{{title}}</button>
</view>
</view>
//index.js
var app = getApp()
var imagePaths = ["../../images/1.png", "../../images/2.png", "../../images/3.png"]; var imageIndex = 0;
Page({
/**
* 页⾯的初始数据
*/
data: {
imagePath: imagePaths[0],
title: '开始',
isRunning: false,
userInfo: {},
},
change: function(e) {
imageIndex++;
if (imageIndex > 2) {
imageIndex = 0;
}
this.setData({
imagePath: imagePaths[imageIndex]
})
},
guess: function(e) {
let isRunning = this.data.isRunning;
if (!isRunning) {
this.setData({
title: "停⽌",
isRunning: true
});
this.timer = setInterval((function() {
this.change()
}).bind(this), 100);
} else {
this.setData({
title: "开始",
isRunning: false
});
textstylethis.timer && clearInterval(this.timer);
}
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function() {
var that = this
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。