WeChat アプレット機能: 同時に 7 つの異なるランダムな整数を生成する方法、数値の範囲は 1 ～ 35 (インスピレーション: ダブル カラー ボール)

機能説明

同时生成七个不相同的随机数字，当点击开始，数字开始变化，变化时间为0.3秒，当点击结束，数字停止。

実装手順

• まず、関数を定義します。関数は次のとおりです。7 つの異なる数値を生成します。数値の範囲は 1 ～ 35 で、型は整数です。
• 次に、開始イベントを定義します。開始イベントは setInterval タイマーを使用し、時間は 300 ミリ秒です。つまり、数値を生成する関数は 300 ミリ秒ごとに呼び出されます。
• 3 番目に、終了時刻を定義します。終了時刻をクリックすると数字が止まります。

コード

// pages/second/second.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    nameValue:'',
    randomNumbers: [], // 存储随机数字的数组
    intervalId: null, // 存储定时器 ID
    isRandoming: false, // 记录是否正在生成随机数字
  },
  /* // 生成七个不相等的随机数字 */
  generateRandomNumbers() {
    
    
    let numbers = [];
    while (numbers.length < 7) {
    
    
      const num = Math.floor(Math.random() * 49) + 1;
      if (numbers.indexOf(num) === -1) {
    
    
        numbers.push(num);
      }
    }
    return numbers;
  },

  // 开始生成随机数字
  start() {
    
    
    this.setData({
    
    
      nameValue:''
    })
    // 如果正在生成随机数字，则直接返回
    if (this.data.isRandoming) {
    
    
      return;
    }
    // 开始生成随机数字并设置定时器
    const intervalId = setInterval(() => {
    
    
      const numbers = this.generateRandomNumbers();
      this.setData({
    
    
        randomNumbers: numbers,
      });
    }, 300);
    this.setData({
    
    
      intervalId: intervalId,
      isRandoming: true,
    });
  },
  // 停止生成随机数字
  end() {
    
    
    // 如果没有在生成随机数字，则直接返回
    if (!this.data.isRandoming) {
    
    
      return;
    }
    // 清除定时器并重置状态
    clearInterval(this.data.intervalId);
    this.setData({
    
    
      intervalId: null,
      isRandoming: false,
    });
  },

//wxml
//数据显示
<view wx:for="{
     
     {randomNumbers}}" wx:key="index">{
   
   {item}}</view>
//开始
<button bindtap="start">开始</button>
//结束时间
<button bindtap="end">结束</button>