ES6公用跑马灯抽奖组件的封装及使用

前言

此组件为本人使用ES6封装的抽奖组件，以下只分享组件的实现及使用方法，不涉及业务相关代码。

Lottery.js

解释请看代码中的注释，如果不是太符合需求，可根据自己的使用场景适当扩展一下…

/*** Created by xieguoqiang on 29/03/2019.*/
export default class Lottery {constructor (giftCount, key) {this.giftCount = giftCount   // 礼品个数this.key = key               // 要抽中哪个(内幕，你懂的)this.currentIndex = 1        // 当前索引this.currentCycle = 0        // 当前圈数this.cycles = 6,             // 跑的圈数this.speed =  200            // 速度，即定时器的时间间隔this.classPrefix = 'gift'    // 礼品名class前缀this.timer = 0               // 定时器}// 外部调用方法start () {return new Promise((resolve, reject) => {this.resolve = resolve // 缓存 resolvethis.reject = reject   // 缓存 rejectthis.init()})}// 内部初始化init () {const before = this.currentIndex === 1 ? this.giftCount : this.currentIndex - 1//设置上一索引的类名const beforeNode = document.getElementsByClassName(this.classPrefix + before)[0]const beforeClassNewName = beforeNode.className.replace(' active','')beforeNode.className = beforeClassNewName//设置当前索引的类名const currentNode = document.getElementsByClassName(this.classPrefix + this.currentIndex)[0]currentNode.className += ' active'this.upSpeed()this.downSpeed()this.currentIndex += 1this.currentIndex = this.currentIndex > this.giftCount ? 1 : this.currentIndex        }// 加速upSpeed () {if (this.currentCycle < 2 && this.speed > 100){this.speed -= 5 * this.currentIndex this.stop()this.run()}}// 减速downSpeed () {// 增加圈数if(this.currentIndex === this.giftCount){this.currentCycle += 1}// 如果当前所跑圈数小于总圈数-2 并且 速度小于400，那么减速if(this.currentCycle > this.cycles - 2 && this.speed < 400){this.speed += 20this.stop()this.run()}// 如果当前所跑圈数大于总圈数 且 索引值等于key，那么停止奔跑if(this.currentCycle > this.cycles && this.currentIndex === this.key){this.stop()this.resolveResult()}}// 停止stop() {clearInterval(this.timer)}// 跑动run () {this.timer = setInterval(() => {this.init()}, this.speed)}// 返回中奖索引resolveResult () {this.resolve(this.key)}
}

使用方法

①：import Lottery from ‘./Lottery’

dom结构

此组件所实现效果(录屏来源于互联网)

ES6公用跑马灯抽奖组件的封装及使用相关推荐

ES6公用立体轮播组件的封装及使用
ES6公用立体轮播组件的封装及使用源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d 1.效果展示 2.容 ...
手机端html跑马灯效果,jQuery实现适用于移动端的跑马灯抽奖特效示例
本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效.分享给大家供大家参考,具体如下: 图片全部隐私处理跑马灯抽奖特效难点一:奖品位置排放,如下图奖品1 奖品2 奖品3 奖品4 奖品5 奖品 ...
php 跑马灯抽奖,JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）_javascript技巧...
最近做了个项目,其中有项目需求是要实现跑马灯抽奖效果,实现此功能主要用到js相关知识,废话不多说,感兴趣的朋友可以阅读下全文. 开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要 ...
ts3.03.x cocos实现九宫格/跑马灯抽奖
项目场景: 实现九空格/跑马灯抽奖效果面板设置: 代码: import { _decorator, Component, Node, SpriteFrame } from 'cc'; const { ...
跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
jQuery九宫格跑马灯抽奖（已知结果）
描述: 写两个抽奖,等级不同,找到一个原生写法的,原作者链接如下: 参考( https://www.cnblogs.com/yangqing22/p/14065754.html ) 略改了一下,换成了 ...
vue实现跑马灯抽奖
近期使用vue开发了一个抽奖活动页面,以下代码块为该功能的所有代码,里面有详细的代码注释,有需要的伙伴可根据自己的业务需求做相应调整,效果图放置最底部, 废话不多数直接上代码→ HTML部分 < ...
ES6公用分页组件的封装及应用举例
ES6公用分页组件的封装及应用举例,以下源码使用到JQuery.Sass,重要的是方法,不合适可以根据自己的需要改改. 分页类以下为pagination.js源码 import './paginat ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...

ES6公用跑马灯抽奖组件的封装及使用

前言

Lottery.js

使用方法

dom结构

此组件所实现效果(录屏来源于互联网)

ES6公用跑马灯抽奖组件的封装及使用相关推荐

最新文章

热门文章