本文实例为大家分享了微信小程序实现摇筛子效果的具体代码,供大家参考,具体内容如下
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 , }) } }, |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/213309/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)