---恢復內容開始---
最近幾天在學習小程序，看了網上的學習視頻，於是自己搗鼓着做出了視頻里面的小程序。
這是實現的效果圖
一個小程序頁面，一般有三個部分文件組成，index.js 這個文件里面放的是實現小程序的js代碼；index.wxml文件里面放的是頁面的結構層代碼；相當於html，index.wxss放的是樣式層代碼，相當於css代碼。
index.wxml運用的是小程序里面的組件，代碼如下：
<!--index.wxml-->
<view class="container">
<text class="win-text">你已經獲勝了</text>
<text class="win-num">{{winNum}}次</text>
<view class="result">
<image src="{{imgAi}}" class="imgAi"></image>
<text class="notice" >{{notice}}</text>
<image src="{{imgUser}}" class="imgUser"></image>
</view>
<view class="item">
<text class="notice-punches">出拳吧，少年~</text>
<block wx:for="{{srcs}}" wx:key="*this">
<view class="img-item" id="{{index}}" >
<image src="{{item}}" class="img-size" bindtap="userChooseImg"></image>
</view>
</block>
<button class="btn-again" bindtap="again">再來！</button>
</view>
</view>
index.js 的代碼如下：
//index.js
//獲取應用實例
var numAi = 0;
var timer;
Page({
data: {
srcs: [
'/pages/images/shiyou.jpg',
'/pages/images/jiandao.jpg',
'/pages/images/bu.jpg',
],
imgAi: '', // 電腦隨機顯示的圖片
imgUser: '/pages/images/wenhao.jpg', // 用戶選中的圖片
notice: '', // 猜拳對比結果
winNum: wx.getStorageSync('winNum'), //用戶猜拳贏的次數
btnpunches: false, // 是否點擊出拳
},
onLoad: function () {
this.timerGo();
},
//設置電腦每間隔0.2s隨機顯示石頭剪刀布
timerGo() {
timer = setInterval(this.change, 200);
},
//設置電腦隨機顯示石頭剪刀布
change() {
if (numAi >= 3) {
numAi = 0;
}
this.setData({
imgAi: this.data.srcs[parseInt(Math.random() * 3)],
})
},
//當用戶點擊下面方框的石頭剪刀布，將用戶數據設置為對用的圖片
userChooseImg(e) {
if (this.data.btnpunches == true) {
return;
}
var num = this.data.winNum;
this.setData({
notice: '你輸了',
btnpunches: true,
})
if (e.currentTarget.offsetLeft == 155) {
this.setData({
imgUser: '/pages/images/shiyou.jpg',
})
//清除計時器
clearInterval(timer);
if (this.data.imgAi == '/pages/images/jiandao.jpg') {
num++;
wx.setStorageSync('winNum', num)
this.setData({
notice: '你贏了',
winNum: num,
})
}
} else if (e.currentTarget.offsetLeft == 280) {
this.setData({
imgUser: '/pages/images/jiandao.jpg',
})
//清除計時器
clearInterval(timer);
if (this.data.imgAi == '/pages/images/bu.jpg') {
num++;
wx.setStorageSync('winNum', num)
this.setData({
notice: '你贏了',
winNum: num,
})
}
} else {
this.setData({
imgUser: '/pages/images/bu.jpg',
})
//清除計時器
clearInterval(timer);
if (this.data.imgAi == '/pages/images/shitou.jpg') {
num++;
wx.setStorageSync('winNum', num)
this.setData({
notice: '你贏了',
winNum:num,
})
}
}
if (this.data.imgAi == this.data.imgUser) {
this.setData({
notice: '平局',
})
//清除計時器
clearInterval(timer);
}
},
//點擊再來，電腦重新啟動猜拳
again() {
//控制按鈕
if (this.data.btnpunches == false) {
return;
}
this.timerGo();
this.setData({
btnpunches: false,
imgUser: '/pages/images/wenhao.jpg',
})
},
})
index.wxss文件的代碼如下：
/**index.wxss**/
.container {
">yellow;
}
.win-text {
text-align: center;
}
.win-num {
color: red;
text-align: center;
}
.result {
height: 160px;
display: inline-block;
}
.notice {
width: 100px;
color: red;
/*height:140px;*//*line-height:140px;*/
text-align: center;
display: inline-block;
padding-top: 0px;
}
.imgAi {
width: 140px;
height: 140px;
padding: 10px 0 10px 10px;
}
.imgUser {
width: 140px;
height: 140px;
padding: 10px 0 10px 10px;
}
.item {
width: 92%;
height: 300px;
">#fff;
margin: 15px;
}
.notice-punches{
text-align:center;
display: block;
padding-top:20px;
}
.img-item {
display: inline-block;
padding: 25px 0 30px 15px;
}
.img-size {
width: 110px;
height: 110px;
border-radius: 50%;
}
.btn-again{
width:80%;
">yellow;
}
該頁面的實現到這里就結束了，謹以文來紀念我的第一個小程序的誕生。
---恢復內容結束---