微信小程序石头剪刀布实例代码

微信小程序石头剪刀布

昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然CSS这块的还不是很熟练,下面直接上图上代码了。

.js:

404_20@=3){ numAi=0; } this.setData({ //获取数组中Ai的，石头剪刀布相应的图片。 imageAiScr: this.data.srcs[numAi],}) numAi++; },again(){ //控制按钮 if(this.data.btnState == false){ return; } //从新开始计时器 this.timerGo(); //刷新数据 this.setData({ btnState:false,gameOfPlay:'',imageUserScr:'/pages/image/wenhao.png' }); } }) 　　 @H_404_22@

.wxml:

<text class="winNum">你已经获胜了<text style="color:red">{{winNum}}text>次text>
<view class="showView">
<image src="{{imageAiScr}}" class="gesturesImgL">image>
<text class="winOrLost">{{gameOfPlay}}text>
<image src="{{imageUserScr}}" class="gesturesImgR">image>
view>

image> view> block> view>

<button class="againBtn" bindtap="again">再来!button>

view>

@H_404_22@

.wxss:

/获胜次数/
.winNum{
padding-top: 40rpx;
display: block;
font-size: 30rpx;
color: #363527;
font-weight:500;
}

/展示出拳结果/
.showView{
display: flex;
width: 100%;
margin-top:30rpx;
height: 200rpx;
}

.gesturesImgL{
height: 180rpx;
width: 180rpx;
margin-left:80rpx;
}

.gesturesImgR{
height: 180rpx;
width: 180rpx;
margin-right:80rpx;
}

.winOrLost{
color: orangered;
flex:1;
font-size: 30rpx;
margin-top:75rpx;
}

/用户出拳/
.chooseForUserView{
margin:40rpx;
height: 800rpx;
background: white;
text-align: center;
}

.choose-V{
display: flex;
margin-top: 40rpx;
}

.choose-view{
flex: 1;
content:none !important;
height: 140rpx;
width: 140rpx;
border:1px solid white;
}

.choose-image{
height: 160rpx;
width: 160rpx;
border-radius:80rpx;
}

/再来/
.againBtn{
margin:80rpx;
background: #FAE738;
}

@H_404_22@

demo资源下载小程序-石头剪刀布

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序石头剪刀布石头剪刀布实例下载石头剪刀布简单实例

上一篇：微信小程序 Canvas增强组件实例详解下一篇：微信小程序解决请求服务器手机预览

微信小程序 石头剪刀布实例代码