微信小程序實現(xiàn)搖篩子效果
更新時間：2021年05月26日 17:36:35 作者：曼夭29
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)搖篩子效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)搖篩子效果的具體代碼，供大家參考，具體內容如下
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,
})
}
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
今天小編就為大家分享一篇layui table 多行刪除(id獲取)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
使用window.prompt()實現(xiàn)彈出用戶輸入的對話框
window對象的最后一種對話框是提示對話框，它顯示了預先設置的信息并提供文本域供用戶輸入應答。它包括兩個按鈕，即Cancel和Ok，允許用戶用兩個相反的期望值來關閉這個對話框：取消整個操作或接收輸入到對話框中的文本2015-04-04
在小編面試過程中經(jīng)常會遇到javascript中this指向問題，可以說是前端面試必問，下面小編給大家總結了一下js中this的指向，感興趣的朋友一起學習吧2017-07-07
大家注意看下，感覺應該是批量給網(wǎng)頁的一些標簽加樣式的函數(shù)。2009-05-05
這篇文章主要源碼解讀了Bootstrap表單，介紹了Bootstrap各式各樣的表單,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JavaScript實現(xiàn)的拼圖算法,結合實例形式分析了javascript圖形拼接與判定算法相關操作技巧及注意事項,需要的朋友可以參考下2019-02-02
這篇文章主要給大家介紹了一些手寫的JavaScript常用的函數(shù)，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
Summernote是一個基于jquery的bootstrap超級簡單WYSIWYG在線編輯器。這篇文章主要介紹了基于BootStrap的文本編輯器組件Summernote的相關資料,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了常見JS驗證腳本,結合實例形式匯總分析了JavaScript用于驗證的系統(tǒng)自帶函數(shù)與自定義函數(shù),具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
JavaScript中Hoisting詳解 (變量提升與函數(shù)聲明提升)
函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。下面這篇文章主要給大家介紹了關于JavaScript中Hoisting(變量提升與函數(shù)聲明提升)的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08