-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (147 loc) · 5.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#wrap-log {
width: 310px;
height: 310px;
background: #d80215;
margin: 100px auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
border-radius: 4px;
padding-left: 2px;
}
.inner {
border-radius: 8px;
width: 100px;
height: 100px;
display: flex;
font-size: 18px;
text-align: center;
justify-content: center;
align-items: center;
background: #ffeeee;
float: left;
margin: 1px;
}
.active {
background: aqua;
}
#btnLottery {
border-radius: 8px;
width: 100px;
height: 100px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
margin: 1px;
background: yellow;
float: left;
}
</style>
<body>
<div id="wrap-log">
<div>
<div data-name="0" class="inner active">啥也没中在抽一次</div>
<div data-name="1" class="inner">请我喝奶茶</div>
<div data-name="2" class="inner">请我吃火锅</div>
<div data-name="3" class="inner">我请你吃烤肉</div>
<div id="btnLottery">点击抽奖</div>
<div data-name="4" class="inner">我请你喝白开水</div>
<div data-name="5" class="inner">请我吃小龙虾</div>
<div data-name="6" class="inner">我请你吃狗粮</div>
<div data-name="7" class="inner">请我吃烤鱼</div>
</div>
</div>
<script>
window.onload = function () {
let btnLottery = document.querySelector("#btnLottery")
let inner = document.querySelectorAll(".inner")
var time, time1, time2, time4;
let defaultConfig = {
index: 0, // 初始位置
speed: 200, // 当前转动速度
downMax: 1000, // 减速上限
waiting: 500, // 减速上限
isRuning: false, // 当前是否正在抽奖
upMax: 100, // 速度上限
}
// 绑定点击开始抽奖事件
function btnClickAction() {
rollup()
}
// 绑定点击事件
btnLottery.addEventListener("click", btnClickAction)
// 当点击抽奖的时候 开启一个定时器运动 把当前的class去掉 下一个添加新的class
function rollup() {
inner[_index()].className = "inner "
++defaultConfig.index
btnLottery.removeEventListener("click", btnClickAction) // // 禁用抽奖 防止重复进行点击
inner[_index()].className = "inner active"
time = setTimeout(() => {
rollup()
}, defaultConfig.speed)
// 当前是否正在抽奖 如果正在抽奖
if (!defaultConfig.isRuning) {
_up()
defaultConfig.isRuning = true
}
}
// 进行加速运动
function _up() {
// 是否当前的转速时间小于最大的速度
if (defaultConfig.speed <= defaultConfig.upMax) {
_constant()
} else {
defaultConfig.speed -= 50
time1 = setTimeout(() => {
_up()
}, defaultConfig.speed)
}
}
// 有3秒时间进行匀速运动
function _constant() {
clearTimeout(time1)
time2 = setTimeout(() => { _down() }, defaultConfig.waiting)
}
// 停止活动了 进行运动停止 转盘停止，还原设置
function _stop() {
clearTimeout(time)
clearTimeout(time4)
btnLottery.addEventListener("click", btnClickAction)
defaultConfig.isRuning = false
defaultConfig.speed = 200
alert(`${inner[_index()].innerHTML}`)
}
// 判断在某个条件下是否该进行停止跑马灯效果运动
function _down() {
// 可以判断在某个值进行停下来
console.log(Math.round(Math.random()*inner.length))
if (defaultConfig.speed > defaultConfig.downMax && _index() === Math.round(Math.random()*inner.length)) {
_stop()
} else {
clearTimeout(time2)
defaultConfig.speed += 50
time4 = setTimeout(() => { _down() }, defaultConfig.speed)
}
console.log(defaultConfig.speed, _index(), defaultConfig.index)
}
// 获取_index 进行取余来代替index 余数肯定不会大于他的最大个数
function _index() {
return defaultConfig.index % inner.length
}
}
</script>
</body>
</html>