微信小程序：摇筛子

最新推荐文章于 2025-05-23 10:45:16 发布

原创最新推荐文章于 2025-05-23 10:45:16 发布 · 5.1k 阅读

7 ·

CC 4.0 BY-SA版权

web前端同时被 2 个专栏收录

30 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

本文介绍了如何在微信小程序中创建一个摇筛子的功能，包括展示摇筛子的效果图，以及关键的HTML和JS代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,


     })

   }
   
 },