微信小程序功能:如何同时生成七个不相同的随机整数,数字范围1-35(灵感:双色球)

文章目录

  • 功能描述
  • 实现步骤
  • 代码实现

功能描述

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

实现步骤

  • 第一、定义一个函数,功能是:生成七个不相同的数字的,并且数字范围为1-35,类型为整数。
  • 第二、定义start开始事件。start事件使用setInterval定时器,时间300ms,也就是每个300ms就去调用生成数字的函数。
  • 第三、定义end结束时间。点击结束时间,数字停止。

代码实现

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

你可能感兴趣的:(微信小程序开发,微信小程序,前端,javascript)