文件地址
https://gitee.com/sujunhao777/js-nine-palace-lucky-draw
首先是HTML部分
接下来是设置样式:
创建div作为 抽奖Q转盘
在div内创建8个奖品,按照顺序分别定位到合适位置,九宫格!
例如: 123 84 765
在div内再创建一个标签作为抽奖按钮,并定位到中间
统一给奖品设置背景颜色,例如: 蓝色(以下都已蓝色为默认颜色)
最后是功能部分:
获取按钮标签,并给它绑定点击事件,点击执行 eveQ 函数作为事件函数
创建全局变量 k 初始为 0,表示为当前选中奖品的下标
获取奖品列表,当点击后,先让第一个奖品修改背景颜色为粉色,也就是长 下标对应的奖品4创建全局变量 time 初始为 500,在点击事件函数内创建定时器,每隔 time 毫秒,执行pu函数
获取奖品列表,并创建 pu 函数,在函数内判断 k 是否小于 7《奖品的数量 - 1)6.如果小于7,执行 k++ 表示让当前选中的下标加一,让上一个奖品也就是 k - 1 下标对应的奖品颜色为蓝色
并让当前选中的奖品也就是k 下标对应的奖品背景颜色为粉色
如果不小于7,表示k 不能再自增了,需要重新初始为 0,
让最后一件奖品《奖品的数量 -1的下标对应的奖品)的背景颜色为蓝色
让第一件奖品 也就是k 下标对应的奖品背景颜色为粉色
领取专属 10元无门槛券
私享最新 技术干货