微信小程序?qū)崿F(xiàn)搖篩子效果
更新時間:2021年05月26日 17:36:35 作者:曼夭29
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)搖篩子效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)搖篩子效果的具體代碼,供大家參考,具體內(nèi)容如下
1.效果圖:
2.HTML代碼:
<!--pages/game/game.wxml--> <view class="text">篩子點數(shù)為:{{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代碼:
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" ] }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ 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, }) } },
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
TypeScript聯(lián)合類型,交叉類型和類型保護
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護,聯(lián)合類型就是定義一些類型,定義的變量只需要滿足任意一種類型即可,交叉類型就是需要滿足所有類型,交叉類型使用,更多內(nèi)容我們來看看下面文章詳細內(nèi)容吧2021-12-12javascript創(chuàng)建cookie、讀取cookie
這篇文章主要介紹了javascript創(chuàng)建cookie、讀取cookie的操作方法,內(nèi)容簡單易學,感興趣的小伙伴們可以參考一下2016-03-03var?let?const關鍵字之間的區(qū)別及使用場景示例詳解
這篇文章主要為大家介紹了var?let?const關鍵字之間的區(qū)別及使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12