【项目】TS--setInterval方法实现抽奖

最新推荐文章于 2024-07-16 10:39:42 发布

冯浩月

最新推荐文章于 2024-07-16 10:39:42 发布

阅读量2.3k

点赞数

分类专栏：项目文章标签： setInterval 抽奖 TS

本文链接：https://blog.csdn.net/m18633778874/article/details/85261208

版权

本文介绍了如何使用TypeScript（TS）的setInterval方法来实现抽奖活动中的人名滚动效果。项目需求是通过按钮触发抽奖，作者分享了从尝试使用JS自带滚动方法到采用定时器实现的思路转变过程，并展示了简易的效果图。

摘要由CSDN通过智能技术生成

前言

小编最近遇到一个项目上面的新需求，需要对报名参加活动的人员进行抽奖活动，基本上就是利用两个button按钮实现，幸运观众的抽取，具体使用了setInterval方法实现滚动效果。

人名滚动效果

一、setInterval 定时执行方法

    //开始按钮 开始计时器
    this.mySetInterval = setInterval(() => {

        this.name = this.names[this.indexWho];
        this.indexWho++;
        if (this.indexWho > this.names.length - 1) {
          this.indexWho = 0;
        }
      }, 100);

   //结束按钮
      clearInterval(this.mySetInterval);  //清除计时器

二、数组存放人名

 //查询参加活动的人员  
queryUserName() {
    let dataUserIds = 'game-web/pooIntegral/queryPersons/' + this.poolId;  

    this.http.get(dataUserIds).subscribe(
      res => {
        this.userIds = res.json().data;
        setTimeout(() => {