微信小程序?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)聽頁面加載
*/
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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
使用window.prompt()實(shí)現(xiàn)彈出用戶輸入的對話框
window對象的最后一種對話框是提示對話框,它顯示了預(yù)先設(shè)置的信息并提供文本域供用戶輸入應(yīng)答。它包括兩個(gè)按鈕,即Cancel和Ok,允許用戶用兩個(gè)相反的期望值來關(guān)閉這個(gè)對話框:取消整個(gè)操作或接收輸入到對話框中的文本2015-04-04
關(guān)于JavaScript中的this指向問題總結(jié)篇
在小編面試過程中經(jīng)常會(huì)遇到j(luò)avascript中this指向問題,可以說是前端面試必問,下面小編給大家總結(jié)了一下js中this的指向,感興趣的朋友一起學(xué)習(xí)吧2017-07-07
JavaScript實(shí)現(xiàn)的拼圖算法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的拼圖算法,結(jié)合實(shí)例形式分析了javascript圖形拼接與判定算法相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2019-02-02
JavaScript中Hoisting詳解 (變量提升與函數(shù)聲明提升)
函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。下面這篇文章主要給大家介紹了關(guān)于JavaScript中Hoisting(變量提升與函數(shù)聲明提升)的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08

