首页 > 编程语言 > 微信小程序实现摇筛子效果
2021
07-17

微信小程序实现摇筛子效果

本文实例为大家分享了微信小程序实现摇筛子效果的具体代码，供大家参考，具体内容如下

1.效果图：

2.HTML代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--pages/game/game.wxml-->
 
<view class="text">筛子点数为：{{total}}</view>
<view class="point1">
  <image src="{{top}}">
  </image>
</view>
<view class="point2">
  <image src="{{left}}"></image>
  <image src="{{right}}">
  </image>
</view>
<button class='{{btn}}' bindtap='click'>{{texts}}</button>

3.js代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
data: {
    top: "../images/images/1-point.png",
    total: '',
    left: "../images/images/2-point.png",
    right: "../images/images/3-point.png",
    btn: '.btnStart',
    texts:'摇一摇',
    flag: true,
    img:[
      "../images/images/1-point.png",
      "../images/images/2-point.png",
      "../images/images/3-point.png",
      "../images/images/4-point.png",
      "../images/images/5-point.png",
      "../images/images/6-point.png"
 
    ]
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
 click:function(){
   var self=this;
   if(this.data.flag){
     
     self.timer=setInterval(function(){
       var one = Math.floor(Math.random() * 6);
       var two = Math.floor(Math.random() * 6);
       var three = Math.floor(Math.random() * 6);
        self.setData({         
          top: self.data.img[one],
          left: self.data.img[two],
          right: self.data.img[three],
          total:one+two+three+3,
           
        })
     },200)
     self.setData({
       btn: ".btnEnd",
       texts: '停止',
       flag:false,
     })
      
   } else {
     clearInterval(self.timer);
 
     self.setData({
       btn: ".btnStart",
       texts: '摇一摇',
       flag: true,
 
 
     })
 
   }
    
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。

编程技巧