快捷導(dǎo)航

微信小程序?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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

小程序?qū)崿F(xiàn)篩子抽獎(jiǎng)

相關(guān)文章

layui table 多行刪除(id獲取)的方法
今天小編就為大家分享一篇layui table 多行刪除(id獲取)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
使用window.prompt()實(shí)現(xiàn)彈出用戶(hù)輸入的對(duì)話框
window對(duì)象的最后一種對(duì)話框是提示對(duì)話框，它顯示了預(yù)先設(shè)置的信息并提供文本域供用戶(hù)輸入應(yīng)答。它包括兩個(gè)按鈕，即Cancel和Ok，允許用戶(hù)用兩個(gè)相反的期望值來(lái)關(guān)閉這個(gè)對(duì)話框：取消整個(gè)操作或接收輸入到對(duì)話框中的文本
2015-04-04
關(guān)于JavaScript中的this指向問(wèn)題總結(jié)篇
在小編面試過(guò)程中經(jīng)常會(huì)遇到j(luò)avascript中this指向問(wèn)題，可以說(shuō)是前端面試必問(wèn)，下面小編給大家總結(jié)了一下js中this的指向，感興趣的朋友一起學(xué)習(xí)吧
2017-07-07
javascript 有用的腳本函數(shù)
大家注意看下，感覺(jué)應(yīng)該是批量給網(wǎng)頁(yè)的一些標(biāo)簽加樣式的函數(shù)。
2009-05-05
Bootstrap源碼解讀表單（2）
這篇文章主要源碼解讀了Bootstrap表單，介紹了Bootstrap各式各樣的表單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JavaScript實(shí)現(xiàn)的拼圖算法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的拼圖算法,結(jié)合實(shí)例形式分析了javascript圖形拼接與判定算法相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下
2019-02-02
一些手寫(xiě)JavaScript常用的函數(shù)匯總
這篇文章主要給大家介紹了一些手寫(xiě)的JavaScript常用的函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
基于BootStrap的文本編輯器組件Summernote
Summernote是一個(gè)基于jquery的bootstrap超級(jí)簡(jiǎn)單WYSIWYG在線編輯器。這篇文章主要介紹了基于BootStrap的文本編輯器組件Summernote的相關(guān)資料,需要的朋友可以參考下
2017-10-10
常見(jiàn)JS驗(yàn)證腳本匯總
這篇文章主要介紹了常見(jiàn)JS驗(yàn)證腳本,結(jié)合實(shí)例形式匯總分析了JavaScript用于驗(yàn)證的系統(tǒng)自帶函數(shù)與自定義函數(shù),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
JavaScript中Hoisting詳解 (變量提升與函數(shù)聲明提升)
函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。下面這篇文章主要給大家介紹了關(guān)于JavaScript中Hoisting(變量提升與函數(shù)聲明提升)的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-08-08