---恢复内容开始---

　　最近几天在学习小程序，看了网上的学习视频，于是自己捣鼓着做出了视频里面的小程序。

　　这是实现的效果图

　　一个小程序页面，一般有三个部分文件组成，index.js 这个文件里面放的是实现小程序的js代码；index.wxml文件里面放的是页面的结构层代码；相当于html，index.wxss放的是样式层代码，相当于css代码。

index.wxml运用的是小程序里面的组件，代码如下：

1. <!--index.wxml-->
2. <view class="container">
3.  
4. <text class="win-text">你已经获胜了</text>
5. <text class="win-num">{{winNum}}次</text>
6.  
7. <view class="result">
8. <image src="{{imgAi}}" class="imgAi"></image>
9. <text class="notice" >{{notice}}</text>
10. <image src="{{imgUser}}" class="imgUser"></image>
11. </view>
12.  
13. <view class="item">
14.  
15. <text class="notice-punches">出拳吧，少年~</text>
16.  
17. <block wx:for="{{srcs}}" wx:key="*this">
18. <view class="img-item" id="{{index}}" >
19. <image src="{{item}}" class="img-size" bindtap="userChooseImg"></image>
20. </view>
21. </block>
22.  
23. <button class="btn-again" bindtap="again">再来！</button>
24.  
25. </view>
26.  
27. </view>

index.js 的代码如下：

1. //index.js
2. //获取应用实例
3. var numAi = 0;
4. var timer;
5. Page({
6. data: {
7. srcs: [
8. '/pages/images/shiyou.jpg',
9. '/pages/images/jiandao.jpg',
10. '/pages/images/bu.jpg',
11. ],
12. imgAi: '', // 电脑随机显示的图片
13. imgUser: '/pages/images/wenhao.jpg', // 用户选中的图片
14. notice: '', // 猜拳对比结果
15. winNum: wx.getStorageSync('winNum'), //用户猜拳赢的次数
16. btnpunches: false, // 是否点击出拳
17. },
18.  
19. onLoad: function () {
20. this.timerGo();
21. },
22.  
23. //设置电脑每间隔0.2s随机显示石头剪刀布
24. timerGo() {
25. timer = setInterval(this.change, 200);
26. },
27.  
28. //设置电脑随机显示石头剪刀布
29. change() {
30.  
31. if (numAi >= 3) {
32. numAi = 0;
33. }
34. this.setData({
35. imgAi: this.data.srcs[parseInt(Math.random() * 3)],
36. })
37. },
38.  
39. //当用户点击下面方框的石头剪刀布，将用户数据设置为对用的图片
40. userChooseImg(e) {
41.  
42. if (this.data.btnpunches == true) {
43. return;
44. }
45.  
46. var num = this.data.winNum;
47.  
48. this.setData({
49. notice: '你输了',
50. btnpunches: true,
51. })
52.  
53. if (e.currentTarget.offsetLeft == 155) {
54. this.setData({
55. imgUser: '/pages/images/shiyou.jpg',
56. })
57. //清除计时器
58. clearInterval(timer);
59. if (this.data.imgAi == '/pages/images/jiandao.jpg') {
60. num++;
61. wx.setStorageSync('winNum', num)
62. this.setData({
63. notice: '你赢了',
64. winNum: num,
65. })
66. }
67.  
68. } else if (e.currentTarget.offsetLeft == 280) {
69. this.setData({
70. imgUser: '/pages/images/jiandao.jpg',
71. })
72. //清除计时器
73. clearInterval(timer);
74. if (this.data.imgAi == '/pages/images/bu.jpg') {
75.  
76. num++;
77. wx.setStorageSync('winNum', num)
78. this.setData({
79. notice: '你赢了',
80. winNum: num,
81. })
82. }
83.  
84. } else {
85. this.setData({
86. imgUser: '/pages/images/bu.jpg',
87. })
88. //清除计时器
89. clearInterval(timer);
90. if (this.data.imgAi == '/pages/images/shitou.jpg') {
91.  
92. num++;
93. wx.setStorageSync('winNum'