위 챗 애플 릿 이 체 흔 들 기 효 과 를 실현 하 다.

본 논문 의 사례 는 여러분 에 게 위 챗 애플 릿 이 체 를 흔 드 는 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
1.효과 도:

2.HTML 코드:

<!--pages/game/game.wxml-->

<view class="text">     ：{{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"

    ]

  },

  /**
   *       --      
   */
 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,


     })

   }
   
 },

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.