微信小程序?qū)崿F(xiàn)搖篩子效果
更新時(shí)間：2021年05月26日 17:36:35 作者：曼夭29
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搖篩子效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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)聽(tīng)頁(yè)面加載
*/
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,
})
}
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
原生JS實(shí)現(xiàn)彈幕效果的簡(jiǎn)單操作指南
這篇文章主要給大家介紹了關(guān)于原生JS實(shí)現(xiàn)彈幕效果的簡(jiǎn)單操作指南，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
判斷JavaScript對(duì)象是否可用的最正確方法分析
在調(diào)試JavaScript的過(guò)程中，你是不是經(jīng)常會(huì)遇到object undefined的問(wèn)題呢？你平時(shí)是怎樣來(lái)測(cè)試對(duì)象是否存在呢？判斷瀏覽器版本？判斷JavaScript版本？本文來(lái)告訴你正確的方法。這篇文章涉及的瀏覽器可能古老一些，但是闡述的道理確實(shí)適合現(xiàn)在使用的。2008-10-10
BooStrap對(duì)導(dǎo)航條的改造實(shí)踐小結(jié)
這篇文章主要介紹了BooStrap對(duì)導(dǎo)航條的改造實(shí)踐小結(jié)的相關(guān)資料,本文分步驟介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
本篇文章主要介紹了詳解tween.js的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
TypeScript聯(lián)合類(lèi)型,交叉類(lèi)型和類(lèi)型保護(hù)
這篇文章主要介紹了TypeScript聯(lián)合類(lèi)型,交叉類(lèi)型和類(lèi)型保護(hù)，聯(lián)合類(lèi)型就是定義一些類(lèi)型，定義的變量只需要滿足任意一種類(lèi)型即可，交叉類(lèi)型就是需要滿足所有類(lèi)型，交叉類(lèi)型使用，更多內(nèi)容我們來(lái)看看下面文章詳細(xì)內(nèi)容吧2021-12-12
這篇文章主要為大家介紹了如何使用splitChunks精細(xì)控制代碼分割來(lái)實(shí)現(xiàn)降低包大小的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
javascript創(chuàng)建cookie、讀取cookie
這篇文章主要介紹了javascript創(chuàng)建cookie、讀取cookie的操作方法，內(nèi)容簡(jiǎn)單易學(xué)，感興趣的小伙伴們可以參考一下2016-03-03
var?let?const關(guān)鍵字之間的區(qū)別及使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了var?let?const關(guān)鍵字之間的區(qū)別及使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
在JavaScript中，和JAVA類(lèi)似，也提供了對(duì)于基本數(shù)據(jù)類(lèi)型的包裝類(lèi)型。例如Number、Boolean、String類(lèi)型。下面我們就來(lái)詳細(xì)探討下吧。2015-06-06