微信小程序功能:如何同时生成七个不相同的随机整数,数字范围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>
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值