年会3d旋转抽奖
效果图：
下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/3d.css">
</head>
<body>
<div class="luckDraw_container">
<!-- <div class="logo"></div> -->
<div class="bgicon"></div>
<!-- 文字3d旋转区域 -->
<div class="b_10_3" id="b_10_3">
<canvas width="800" height="800" id="myCanvas"></canvas>
<div id="tags"></div>
</div>
<!-- 抽奖结果展示 -->
<div class="showResults lottery-record-container" id="showResults0">
<div class="lottery-record-panel photodraw-record"
style="border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAD9klEQVR4Xu3dv4tUVxQH8Hd/v5mdVUTEWNrFxiKBEMx/sGCRwsLKxs5ASBEUTB1ExCKQLqRIlSZNUvgnJIEUKaysUiqIoM7OvHd/vTDrumFA5p6Zc3dY4ndhqnPe9+1+3uHCwts9YhiGoTnJX4L4zZ3sn6IRgCY+SGbbEfTNyff/BJW8l9FHmePBp8mpkc2QRD7h88JUYF4uB9GIRkiVhdKDUDprbZMyNin3w/SLi4v4I+gbp797Mleh8yr6XiUfZIxJDinJlKC8+kksTjeZlVRZKpulMYPWbVSujcb99PLLD5egr595+HiuQ9fp2HUqeK9iCDKntPiIE36OMyeSe7kahJCDkCYrZZMxbVTWZePGwbY/v/jq8hL0tbMP/p4aP5tr33U69HO9gE7xAFoCetXDUFkI+WaaVZusWUzyOKh2HN3ol+dff7QE/fm5+3+9Nt1sZvx834R+LoP3OsWgUkoNoFdCN0KYJKXN2rRRm1G0bse7dpLs+Ndntz9Zgr567t6fU9fPpqaf7xvfzXTwvQnBCxwdpaNlcXToQapR0LrNxu546yahHZ3ybue3Z3c+XYY+f++Pl242nR5MtO+mxvtOxdDLhKOjIK0OJlopF5WeJLuAbne9G+16t/Po6d0rS9B7H3z7+2vb7b+y/Wzf+m6qvO90DL1KaRA5l57q+1wXgxAuK+WSNuOg7a5v3SS48el+Af3NZ4CuNB2ArgRZigF0SahSHdCVIEsxgC4JVaoDuhJkKQbQJaFKdUBXgizFALokVKkO6EqQpRhAl4Qq1QFdCbIUA+iSUKU6oCtBlmIAXRKqVAd0JchSDKBLQpXqgK4EWYoBdEmoUh3QlSBLMYAuCVWqA7oSZCkG0CWhSnVAV4IsxQC6JFSpDuhKkKUYQJeEKtUBXQmyFAPoklClOg36xZuXzPcu4W3STd1p0Idv8++dB/RxQP/4/NbHF9KZVgyA3tT36LpVEw1oNu9/AYCuiLkqCtCA3pLAlm6DiQb0lgS2dBtMNKC3JLCl29Am+vA/0OAPOjd/KrRfwQG9ufDhlYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS0A0DQndheg2YS0AEDTnNhdgGYT0gIATXNidwGaTUgLADTNid0FaDYhLQDQNCd2F6DZhLQAQNOc2F2AZhPSAgBNc2J3AZpNSAsANM2J3QVoNiEtANA0J3YXoNmEtABA05zYXYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS1gLeirWHhDU31H11oLb7DCaWPnZq0VTlhKxoBeZykZ1uwxoNdZs4fFkQzodRZHYhXq5tBrrULFct/Nodda7rv5bY75SuwFP2bgt/H/E+h/AUa5G7FkjEn3AAAAAElFTkSuQmCC');">
<div class="record-header"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="close-btn" onclick="HideResults('showResults0')"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="swiper-title">参与奖: 奖品坚果礼包</div>
<div class="swiper-container lottery-record-swiper swiper-container-initialized swiper-container-horizontal"
id="resultbox0">
<!-- <div class="resultbox_item">易兴缰</div> -->
</div>
</div>
</div>
<div class="showResults lottery-record-container" id="showResults1">
<div class="lottery-record-panel photodraw-record"
style="border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAD9klEQVR4Xu3dv4tUVxQH8Hd/v5mdVUTEWNrFxiKBEMx/sGCRwsLKxs5ASBEUTB1ExCKQLqRIlSZNUvgnJIEUKaysUiqIoM7OvHd/vTDrumFA5p6Zc3dY4ndhqnPe9+1+3uHCwts9YhiGoTnJX4L4zZ3sn6IRgCY+SGbbEfTNyff/BJW8l9FHmePBp8mpkc2QRD7h88JUYF4uB9GIRkiVhdKDUDprbZMyNin3w/SLi4v4I+gbp797Mleh8yr6XiUfZIxJDinJlKC8+kksTjeZlVRZKpulMYPWbVSujcb99PLLD5egr595+HiuQ9fp2HUqeK9iCDKntPiIE36OMyeSe7kahJCDkCYrZZMxbVTWZePGwbY/v/jq8hL0tbMP/p4aP5tr33U69HO9gE7xAFoCetXDUFkI+WaaVZusWUzyOKh2HN3ol+dff7QE/fm5+3+9Nt1sZvx834R+LoP3OsWgUkoNoFdCN0KYJKXN2rRRm1G0bse7dpLs+Ndntz9Zgr567t6fU9fPpqaf7xvfzXTwvQnBCxwdpaNlcXToQapR0LrNxu546yahHZ3ybue3Z3c+XYY+f++Pl242nR5MtO+mxvtOxdDLhKOjIK0OJlopF5WeJLuAbne9G+16t/Po6d0rS9B7H3z7+2vb7b+y/Wzf+m6qvO90DL1KaRA5l57q+1wXgxAuK+WSNuOg7a5v3SS48el+Af3NZ4CuNB2ArgRZigF0SahSHdCVIEsxgC4JVaoDuhJkKQbQJaFKdUBXgizFALokVKkO6EqQpRhAl4Qq1QFdCbIUA+iSUKU6oCtBlmIAXRKqVAd0JchSDKBLQpXqgK4EWYoBdEmoUh3QlSBLMYAuCVWqA7oSZCkG0CWhSnVAV4IsxQC6JFSpDuhKkKUYQJeEKtUBXQmyFAPoklClOg36xZuXzPcu4W3STd1p0Idv8++dB/RxQP/4/NbHF9KZVgyA3tT36LpVEw1oNu9/AYCuiLkqCtCA3pLAlm6DiQb0lgS2dBtMNKC3JLCl29Am+vA/0OAPOjd/KrRfwQG9ufDhlYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS0A0DQndheg2YS0AEDTnNhdgGYT0gIATXNidwGaTUgLADTNid0FaDYhLQDQNCd2F6DZhLQAQNOc2F2AZhPSAgBNc2J3AZpNSAsANM2J3QVoNiEtANA0J3YXoNmEtABA05zYXYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS1gLeirWHhDU31H11oLb7DCaWPnZq0VTlhKxoBeZykZ1uwxoNdZs4fFkQzodRZHYhXq5tBrrULFct/Nodda7rv5bY75SuwFP2bgt/H/E+h/AUa5G7FkjEn3AAAAAElFTkSuQmCC');">
<div class="record-header"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="close-btn" onclick="HideResults('showResults1')"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="swiper-title">三等奖: 奖品天猫精灵</div>
<div class="swiper-container lottery-record-swiper swiper-container-initialized swiper-container-horizontal"
id="resultbox1">
</div>
</div>
</div>
<div class="showResults lottery-record-container" id="showResults2">
<div class="lottery-record-panel photodraw-record"
style="border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAD9klEQVR4Xu3dv4tUVxQH8Hd/v5mdVUTEWNrFxiKBEMx/sGCRwsLKxs5ASBEUTB1ExCKQLqRIlSZNUvgnJIEUKaysUiqIoM7OvHd/vTDrumFA5p6Zc3dY4ndhqnPe9+1+3uHCwts9YhiGoTnJX4L4zZ3sn6IRgCY+SGbbEfTNyff/BJW8l9FHmePBp8mpkc2QRD7h88JUYF4uB9GIRkiVhdKDUDprbZMyNin3w/SLi4v4I+gbp797Mleh8yr6XiUfZIxJDinJlKC8+kksTjeZlVRZKpulMYPWbVSujcb99PLLD5egr595+HiuQ9fp2HUqeK9iCDKntPiIE36OMyeSe7kahJCDkCYrZZMxbVTWZePGwbY/v/jq8hL0tbMP/p4aP5tr33U69HO9gE7xAFoCetXDUFkI+WaaVZusWUzyOKh2HN3ol+dff7QE/fm5+3+9Nt1sZvx834R+LoP3OsWgUkoNoFdCN0KYJKXN2rRRm1G0bse7dpLs+Ndntz9Zgr567t6fU9fPpqaf7xvfzXTwvQnBCxwdpaNlcXToQapR0LrNxu546yahHZ3ybue3Z3c+XYY+f++Pl242nR5MtO+mxvtOxdDLhKOjIK0OJlopF5WeJLuAbne9G+16t/Po6d0rS9B7H3z7+2vb7b+y/Wzf+m6qvO90DL1KaRA5l57q+1wXgxAuK+WSNuOg7a5v3SS48el+Af3NZ4CuNB2ArgRZigF0SahSHdCVIEsxgC4JVaoDuhJkKQbQJaFKdUBXgizFALokVKkO6EqQpRhAl4Qq1QFdCbIUA+iSUKU6oCtBlmIAXRKqVAd0JchSDKBLQpXqgK4EWYoBdEmoUh3QlSBLMYAuCVWqA7oSZCkG0CWhSnVAV4IsxQC6JFSpDuhKkKUYQJeEKtUBXQmyFAPoklClOg36xZuXzPcu4W3STd1p0Idv8++dB/RxQP/4/NbHF9KZVgyA3tT36LpVEw1oNu9/AYCuiLkqCtCA3pLAlm6DiQb0lgS2dBtMNKC3JLCl29Am+vA/0OAPOjd/KrRfwQG9ufDhlYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS0A0DQndheg2YS0AEDTnNhdgGYT0gIATXNidwGaTUgLADTNid0FaDYhLQDQNCd2F6DZhLQAQNOc2F2AZhPSAgBNc2J3AZpNSAsANM2J3QVoNiEtANA0J3YXoNmEtABA05zYXYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS1gLeirWHhDU31H11oLb7DCaWPnZq0VTlhKxoBeZykZ1uwxoNdZs4fFkQzodRZHYhXq5tBrrULFct/Nodda7rv5bY75SuwFP2bgt/H/E+h/AUa5G7FkjEn3AAAAAElFTkSuQmCC');">
<div class="record-header"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="close-btn" onclick="HideResults('showResults2')"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="swiper-title">二等奖: 奖金328元红包</div>
<div class="swiper-container lottery-record-swiper swiper-container-initialized swiper-container-horizontal"
id="resultbox2">
</div>
</div>
</div>
<div class="showResults lottery-record-container" id="showResults3">
<div class="lottery-record-panel photodraw-record"
style="border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAD9klEQVR4Xu3dv4tUVxQH8Hd/v5mdVUTEWNrFxiKBEMx/sGCRwsLKxs5ASBEUTB1ExCKQLqRIlSZNUvgnJIEUKaysUiqIoM7OvHd/vTDrumFA5p6Zc3dY4ndhqnPe9+1+3uHCwts9YhiGoTnJX4L4zZ3sn6IRgCY+SGbbEfTNyff/BJW8l9FHmePBp8mpkc2QRD7h88JUYF4uB9GIRkiVhdKDUDprbZMyNin3w/SLi4v4I+gbp797Mleh8yr6XiUfZIxJDinJlKC8+kksTjeZlVRZKpulMYPWbVSujcb99PLLD5egr595+HiuQ9fp2HUqeK9iCDKntPiIE36OMyeSe7kahJCDkCYrZZMxbVTWZePGwbY/v/jq8hL0tbMP/p4aP5tr33U69HO9gE7xAFoCetXDUFkI+WaaVZusWUzyOKh2HN3ol+dff7QE/fm5+3+9Nt1sZvx834R+LoP3OsWgUkoNoFdCN0KYJKXN2rRRm1G0bse7dpLs+Ndntz9Zgr567t6fU9fPpqaf7xvfzXTwvQnBCxwdpaNlcXToQapR0LrNxu546yahHZ3ybue3Z3c+XYY+f++Pl242nR5MtO+mxvtOxdDLhKOjIK0OJlopF5WeJLuAbne9G+16t/Po6d0rS9B7H3z7+2vb7b+y/Wzf+m6qvO90DL1KaRA5l57q+1wXgxAuK+WSNuOg7a5v3SS48el+Af3NZ4CuNB2ArgRZigF0SahSHdCVIEsxgC4JVaoDuhJkKQbQJaFKdUBXgizFALokVKkO6EqQpRhAl4Qq1QFdCbIUA+iSUKU6oCtBlmIAXRKqVAd0JchSDKBLQpXqgK4EWYoBdEmoUh3QlSBLMYAuCVWqA7oSZCkG0CWhSnVAV4IsxQC6JFSpDuhKkKUYQJeEKtUBXQmyFAPoklClOg36xZuXzPcu4W3STd1p0Idv8++dB/RxQP/4/NbHF9KZVgyA3tT36LpVEw1oNu9/AYCuiLkqCtCA3pLAlm6DiQb0lgS2dBtMNKC3JLCl29Am+vA/0OAPOjd/KrRfwQG9ufDhlYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS0A0DQndheg2YS0AEDTnNhdgGYT0gIATXNidwGaTUgLADTNid0FaDYhLQDQNCd2F6DZhLQAQNOc2F2AZhPSAgBNc2J3AZpNSAsANM2J3QVoNiEtANA0J3YXoNmEtABA05zYXYBmE9ICAE1zYncBmk1ICwA0zYndBWg2IS1gLeirWHhDU31H11oLb7DCaWPnZq0VTlhKxoBeZykZ1uwxoNdZs4fFkQzodRZHYhXq5tBrrULFct/Nodda7rv5bY75SuwFP2bgt/H/E+h/AUa5G7FkjEn3AAAAAElFTkSuQmCC');">
<div class="record-header"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="close-btn" onclick="HideResults('showResults3')"
style="background-image: url("https://static.newstartjx.com/yjhdv3/core/20210105/a62d5aea92ab45c398fcbf7be3fcec4f.png");">
</div>
<div class="swiper-title">一等奖：奖金666元红包</div>
<div class="swiper-container lottery-record-swiper swiper-container-initialized swiper-container-horizontal"
id="resultbox3">
</div>
</div>
</div>
<!-- 底部功能区 -->
<div class="luckDraw_footer">
<div class="select">
<select id="selectdom" name="selectdom">
<option value="0">参与奖</option>
<option value="1">三等奖</option>
<option value="2">二等奖</option>
<option value="3">一等奖</option>
</select>
</div>
<div class="luckDraw_menu">
<div class="luckDraw_menu_item" onclick="start()">开始抽奖</div>
<div class="luckDraw_menu_item" onclick="end()">停止</div>
</div>
</div>
</div>
<!-- 媒体播放区域 -->
<audio id="bgMusic" src="./media/bg1.mp3" autoplay loop></audio>
</body>
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/tagcanvas.min.js"></script>
</html>
html,
body {
100%;
height: 100%;
}
html {
/*隐藏滚动条，当IE下溢出，仍然可以滚动*/
-ms-overflow-style: none;
/*火狐下隐藏滚动条*/
overflow: -moz-scrollbars-none;
}
/* 谷歌适用 */
::-webkit-scrollbar {
display: none;
}
.luckDraw_container {
100%;
height: 100%;
background-image: url(../images/cjbg.jpg);
background-size: cover;
}
.logo {
10vw;
height: 5vw;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 2vw;
left: calc(50% - 5vw);
}
.bgicon {
50%;
height: 30%;
background-image: url(../images/cjicon.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 15vw;
left: 6%;
}
.luckDraw_footer {
20vw;
height: 20vw;
/* border: 1px solid floralwhite; */
position: absolute;
bottom: 4vw;
right: 2vw;
z-index: 99;
box-sizing: border-box;
}
.luckDraw_menu {
100%;
height: 100%;
box-sizing: border-box;
}
.luckDraw_menu_item {
margin-top: 2vw;
background-image: url(../images/start.png);
display: inline-block;
18.5rem;
height: 6.375rem;
line-height: 6.375rem;
background-repeat: no-repeat;
background-size: 18.5rem 6.375rem;
cursor: pointer;
text-align: center;
font-size: 2rem;
color: #ffffff;
}
.showResults {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-perspective: 1px;
perspective: 1px;
z-index: 810;
padding: 3.125%;
}
.lottery-record-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-perspective: 1px;
perspective: 1px;
z-index: 810;
padding: 3.125%;
}
.lottery-record-panel {
position: absolute;
left: 3.125%;
top: 5.5555555556%;
bottom: 5.5555555556%;
right: 3.125%;
text-align: center;
border-style: solid;
border-image-repeat: stretch;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.lottery-record-panel.photodraw-record {
border- 2.5rem;
border-image-slice: 40 fill;
padding-bottom: 1.25rem;
background: rgba(0, 0, 0, 0.95);
}
.lottery-record-panel.photodraw-record .record-header {
position: absolute;
top: -4.25rem;
left: 50%;
margin-left: -29.75rem;
59.5rem;
height: 3.5rem;
}
.lottery-record-panel.photodraw-record .close-btn {
top: -1.875rem;
right: -1.875rem;
3.5rem;
height: 3.5rem;
background-position: -10.5rem -3.5rem;
}
.lottery-record-panel .close-btn {
position: absolute;
z-index: 811;
cursor: pointer;
}
.lottery-record-panel.lottery-record-list-container.lottery-record-swiper {
100%;
height: 100%;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: space-around;
align-items: center;
height: 100%;
}
.resultbox_item {
font-size: 5vw;
color: #ffffff;
float: left;
}
#resultbox0 .resultbox_item {
33.33%;
}
#resultbox1 .resultbox_item {
33.33%;
}
#resultbox2 .resultbox_item {
33.33%;
}
#resultbox3 .resultbox_item {
33.33%;
}
.select {
margin-top: 2vw;
display: inline-block;
14vw;
position: relative;
vertical-align: middle;
padding: 0;
overflow: hidden;
background-color: #fff;
color: #555;
border: 1px solid #aaa;
text-shadow: none;
border-radius: 4px;
transition: box-shadow 0.25s ease;
z-index: 2;
}
.select:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.select:before {
content: '';
position: absolute;
0;
height: 0;
border: 10px solid transparent;
border-top-color: #ccc;
top: 14px;
right: 10px;
cursor: pointer;
z-index: -2;
}
.select select {
cursor: pointer;
padding: 0.6vw;
100%;
border: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 0.8vw !important;
}
.select select:focus {
outline: none;
}
.swiper-title {
color: #fff;
font-size: 2vw;
}
function start() {
createLabel(user)
// console.log(document.documentElement.clientWidth)
let clientWidth = document.documentElement.clientWidth;
let clientHeight = document.documentElement.clientHeight;
document.getElementById('myCanvas').style.width = clientWidth * 0.4 + 'px'
document.getElementById('myCanvas').style.height = clientWidth * 0.4 + 'px'
document.getElementById('b_10_3').style.top = clientHeight * 0.5 - clientWidth * 0.2 + 'px'
document.getElementById('b_10_3').style.left = clientWidth * 0.5 - clientWidth * 0.2 + 'px'
document.getElementById('myCanvas').style.display = 'block';
// left: calc(50 % - 400px);
// top: calc(50 % - 400px);
// console.log(document.getElementById('myCanvas').style.width)
// 播放音乐
audio.currentTime = 0;
audio.play();
try {
TagCanvas.Start('myCanvas', 'tags', {
textColour: '#fff',
outlineColour: '#fff',
textHeight: 30,
weightMode: 'colour',
weight: true,
wheelZoom: false,
weightGradient: {
0: '#f00',
0.33: '#ff0',
0.66: '#0f0',
1: '#00f'
},
reverse: true,
depth: 0.8,
dragControl: true,
decel: 0.95,
maxSpeed: curentstep / 10 + 0.1,
initial: [-0.2, 0]
});
} catch (e) {
// something went wrong, hide the canvas container
//document.getElementById('myCanvas').style.display = 'none';
}
}
// 停止旋转
function end() {
// 获取当前下拉框中选中的奖项类型
let myselect = document.getElementById("selectdom");
let index = myselect.selectedIndex;
curentstep = myselect.options[index].value;
GenerationWins(curentstep)
TagCanvas.Pause('myCanvas')
showResults('showResults' + curentstep)
document.getElementById('myCanvas').style.display = 'none';
}
// 生成中奖人员
function GenerationWins(type) {
let winUserList = []
if (type == 0) {
// 参与奖10人-奖品坚果礼包
winUserList = getUserNameList(10, curUser.length)
} else if (type == 1) {
// 三等奖5人-奖品天猫精灵
winUserList = getUserNameList(5, curUser.length)
} else if (type == 2) {
// 二等奖3人-奖金328红包
winUserList = getUserNameList(3, curUser.length)
} else if (type == 3) {
// 一等奖1人-奖金666红包
winUserList = getUserNameList(1, curUser.length)
}
// console.log(winUserList)
let userListDom = document.getElementById('resultbox' + curentstep)
let html = '';
for (let i = 0, length = winUserList.length; i < length; i++) {
html += "<div class='resultbox_item'>" + winUserList[i].name + "</div >"
}
userListDom.innerHTML = html
}
// 获取人员名单
function getUserNameList(number, userCount, u) {
let userList = []
var userArray = randomNum(number, 1, userCount - 1)
userArray.forEach(el => {
userList.push(curUser[el])
})
userList.forEach(el => {
var index = curUser.indexOf(el)
curUser.splice(index, 1);
})
return userList
}
// 生成随机数
function randomNum(len, start, end) {
var arr = [];
function _inner(start, end) {
var span = end - start;
return parseInt(Math.random() * span + start)
}
while (arr.length < len) {
var num = _inner(start, end);
if (arr.indexOf(num) == -1) {
arr.push(num);
}
}
return arr;
}
// 显示获奖框
function showResults(id) {
allowRotation = false
let tag = document.getElementById(id)
tag.style.display = 'block'
}
// 隐藏获奖框
function HideResults(id) {
// console.log(id)
allowRotation = true
let tag = document.getElementById(id)
tag.style.display = 'none'
}
function createLabel(arr) {
let html = '';
for (let i = 0, length = arr.length; i < length; i++) {
html += "<a href='#' style='font-size:80px'>" + arr[i].name + "</a>"
}
tags.innerHTML = html
}
let tags = document.getElementById("tags")
// 参与抽奖人员
var user = [{
name: '李成龙',
pro: ''
},
{
name: '易兴缰',
pro: ''
},
{
name: '甘伟',
pro: ''
},
{
name: '张卫威',
pro: ''
},
{
name: '谢同林',
pro: ''
},
{
name: '易小钦',
pro: ''
},
{
name: '袁浩',
pro: ''
},
{
name: '李根',
pro: ''
},
{
name: '吴强',
pro: ''
},
{
name: '任涛',
pro: ''
},
{
name: '徐烈',
pro: ''
},
{
name: '李正君',
pro: ''
},
{
name: '毛进学',
pro: ''
},
{
name: '吴清清',
pro: ''
},
{
name: '李鹏',
pro: ''
},
{
name: '张谦',
pro: ''
},
{
name: '陆开凡',
pro: ''
},
{
name: '张权昌',
pro: ''
},
{
name: '韦掇',
pro: ''
},
{
name: '杨林',
pro: ''
},
{
name: '马晓杰',
pro: ''
},
{
name: '黄康松',
pro: ''
},
{
name: '沈茂春',
pro: ''
},
{
name: '邓莹',
pro: ''
},
{
name: '覃立谦',
pro: ''
},
{
name: '李云飞',
pro: ''
},
{
name: '潘长青',
pro: ''
},
{
name: '邱晨',
pro: ''
},
{
name: '陈杰',
pro: ''
},
{
name: '殷晓春',
pro: ''
},
{
name: '胡榆振',
pro: ''
},
{
name: '左辉明',
pro: ''
},
{
name: '张厚兵',
pro: ''
},
{
name: '谭鹏',
pro: ''
},
{
name: '严斌',
pro: ''
},
{
name: '谢崇尚',
pro: ''
},
{
name: '黄焕坤',
pro: ''
},
{
name: '陆阔',
pro: ''
},
{
name: '孔凡强',
pro: ''
},
{
name: '廖国红',
pro: ''
},
{
name: '凌海锋',
pro: ''
},
{
name: '黄涛',
pro: ''
},
{
name: '陈晓静',
pro: ''
},
{
name: '杨德势',
pro: ''
},
{
name: '刘晓松',
pro: ''
},
{
name: '彭栋川',
pro: ''
},
{
name: '赵红',
pro: ''
},
{
name: '张迪',
pro: ''
},
{
name: '杨龙',
pro: ''
},
{
name: '谭消',
pro: ''
},
{
name: '李天鑫',
pro: ''
},
{
name: '张中原',
pro: ''
},
{
name: '李腾飞',
pro: ''
},
{
name: '郑裕杰',
pro: ''
},
{
name: '陈迪一',
pro: ''
},
{
name: '施云',
pro: ''
},
{
name: '蒋爱平',
pro: ''
},
{
name: '范兵',
pro: ''
},
{
name: '郑小园',
pro: ''
},
{
name: '赵学文',
pro: ''
},
{
name: '张威',
pro: ''
},
{
name: '孙文勇',
pro: ''
},
{
name: '逯爱民',
pro: ''
},
{
name: '邹伟坤',
pro: ''
},
{
name: '彭静宜',
pro: ''
},
{
name: '龚银军',
pro: ''
},
{
name: '彭勇',
pro: ''
},
{
name: '朱蕾',
pro: ''
},
{
name: '揭登文',
pro: ''
},
{
name: '孙光荣',
pro: ''
},
{
name: '伍新',
pro: ''
},
{
name: '刘涛',
pro: ''
},
{
name: '巫统辉',
pro: ''
},
{
name: '刘宏燕',
pro: ''
},
{
name: '邹俊芳',
pro: ''
},
{
name: '陈涛',
pro: ''
},
{
name: '许禄球',
pro: ''
},
{
name: '赵涛',
pro: ''
},
{
name: '刘聪',
pro: ''
},
{
name: '刘珍',
pro: ''
},
{
name: '严芳芳',
pro: ''
},
{
name: '胡进超',
pro: ''
},
{
name: '刘延红',
pro: ''
},
{
name: '张淑云',
pro: ''
},
{
name: '熊皓',
pro: ''
},
{
name: '夏婷婷',
pro: ''
},
{
name: '邬开馨',
pro: ''
},
{
name: '陈林',
pro: ''
},
{
name: '胡远法',
pro: ''
},
{
name: '雪萍',
pro: ''
}
]
// 当前参与抽奖的人
var curUser = JSON.parse(JSON.stringify(user))
// 抽奖进度
var curentstep = 0
// 全局控制是否可以转动（当显示获奖名单的时候不允许转动抽奖）初始状态true
var allowRotation = true
// 获取音乐dom
var audio = document.getElementById("bgMusic");
// 监听用户键盘事件--不用键盘
// document.onkeydown = function (e) {
// var keyNum = window.event ? e.keyCode : e.which;
// if (keyNum == 32) {
// console.log('按下了空格键')
// if (allowRotation) {
// end()
// } else {
// HideResults('showResults' + (curentstep - 1))
// start()
// }
// }
// }
//IE
if (document.addEventListener) {
document.addEventListener('msvisibilitychange', function() {
if (document.msVisibilityState == 'hidden') {
audio.pause()
} else {
audio.play()
}
})
}
//火狐
if (document.addEventListener) {
document.addEventListener('mozvisibilitychange', function() {
if (document.mozVisibilityState == 'hidden') {
audio.pause()
} else {
audio.play()
}
})
}
//谷歌
if (document.addEventListener) {
document.addEventListener('webkitvisibilitychange', function() {
if (document.webkitVisibilityState == 'hidden') {
audio.pause()
} else {
audio.play()
}
})
}
主要实现的功能是，名字旋转抽奖。抽奖的规则是：抽中过得人不能参与下次抽奖
完整代码获取：
链接: https://pan.baidu.com/s/1wo3Kxj9wkAmx6-jzi1djNQ 提取码: uazv 复制这段内容后打开百度网盘手机App，操作更方便哦