版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/85261208
前言
小编最近遇到一个项目上面的新需求,需要对报名参加活动的人员进行抽奖活动,基本上就是利用两个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(() => {
for (let index = 0; index < this.userIds.length; index++) {
this.userId = this.userIds[index];
let dataUserNames = 'game-web/user/queryUserById/' + this.userId;
this.http.get(dataUserNames).subscribe(
res => {
if (res.json().data != null && res.json().data != undefined) {
this.names[index] = res.json().data; //将查询到的人名存放到数组
}
});
}
}
效果图
简易效果图如下所示:
小结
这个小功能,其实只要用对了方法就很好实现,一开始自己打算使用js自带的滚动效果方法去实现,发现比较难以实现,最终转换思路,考虑使用定时器setInterval的方式实现。
感谢您的访问!