微信小程序?qū)崿F(xiàn)搖篩子效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)搖篩子效果的具體代碼,供大家參考,具體內(nèi)容如下
1.效果圖:
2.HTML代碼:
<!--pages/game/game.wxml--> <view class="text">篩子點(diǎn)數(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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
判斷JavaScript對(duì)象是否可用的最正確方法分析
在調(diào)試JavaScript的過程中,你是不是經(jīng)常會(huì)遇到object undefined的問題呢?你平時(shí)是怎樣來測試對(duì)象是否存在呢?判斷瀏覽器版本?判斷JavaScript版本?本文來告訴你正確的方法。這篇文章涉及的瀏覽器可能古老一些,但是闡述的道理確實(shí)適合現(xiàn)在使用的。2008-10-10BooStrap對(duì)導(dǎo)航條的改造實(shí)踐小結(jié)
這篇文章主要介紹了BooStrap對(duì)導(dǎo)航條的改造實(shí)踐小結(jié)的相關(guān)資料,本文分步驟介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09TypeScript聯(lián)合類型,交叉類型和類型保護(hù)
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護(hù),聯(lián)合類型就是定義一些類型,定義的變量只需要滿足任意一種類型即可,交叉類型就是需要滿足所有類型,交叉類型使用,更多內(nèi)容我們來看看下面文章詳細(xì)內(nèi)容吧2021-12-12JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05javascript創(chuàng)建cookie、讀取cookie
這篇文章主要介紹了javascript創(chuàng)建cookie、讀取cookie的操作方法,內(nèi)容簡單易學(xué),感興趣的小伙伴們可以參考一下2016-03-03var?let?const關(guān)鍵字之間的區(qū)別及使用場景示例詳解
這篇文章主要為大家介紹了var?let?const關(guān)鍵字之間的區(qū)別及使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12