JS抽奖
方绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>抽奖</title>
<meta name="keywords" content="抽奖" />
<meta name="description" content="抽奖" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).bind("keydown", function(e) {
e = window.event || e;
if (e.keyCode == 116) {
e.keyCode = 0;
return false; //屏蔽F5刷新键
}
});
function stops() {
return false;
}
document.oncontextmenu = stops;
</script>
<style>
@font-face {
font-family: huayi;
src: url("./fonts/HYChengXingJ.ttf");
}
@font-face {
font-family: shuzi;
src: url("./fonts/HYShangWeiShouShuW.ttf");
}
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
i {
font-style: normal;
}
.vetically {
justify-content: center;
align-items: center;
display: -webkit-flex;
}
.prize_con {
position: absolute;
width: 100%;
height: 100%;
/*背景图片*/
background: url(images/back2021.png) no-repeat left top/100% 100%;
overflow: hidden;
}
.prize_grade {
text-shadow: 5px 5px 5px black;
font-size: 150px;
-webkit-text-stroke: 1px #a94600;
color: #ffff00;
text-align: center;
margin: 90px auto 0;
font-family: huayi;
}
.prize_list {
width: 90%;
height: 400px;
margin: 0px auto 95px;
text-align: center;
overflow: hidden;
}
.prize_list ul {
width: 100%;
font-size: 0;
}
.prize_list li {
text-shadow: 3px 3px 3px black;
font-family: shuzi;
display: inline-block;
font-size: 140px;
-webkit-text-stroke: 1px #a94600;
color: #ffff00;
text-align: center;
width: 20%;
line-height: 160px;
}
.start {
width: 250px;
height: 90px;
margin: 0 auto;
cursor: pointer;
}
.prize_set {
position: absolute;
right: 60px;
bottom: 0px;
font-size: 16px;
color: #f7f3e8;
line-height: 30px;
}
.prize_set li {
display: inline-block;
margin-left: 20px;
}
.set_grade p {
font-family: huayi;
background: none;
border-radius: 20px;
width: 110px;
height: 36px;
border: 1px solid #8f0000;
margin-left: .1rem;
color: #000;
padding-left: 10px;
}
</style>
</head>
<body>
<p hidden="hidden" class="luckyList" style="font-size: 15px;"></p>
<div class="wrap">
<div class="prize_con">
<p class="prize_grade">
<span>丰收奖</span>
</p>
<div class="prize_list vetically">
<ul>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
<li style="display: none">000</li>
</ul>
</div>
<p hidden="hidden" class="start"></p>
<ul hidden="hidden" class="prize_set">
<li class="set_grade">
<p id="set_grade"></p>
</li>
</ul>
</div>
</div>
<input type="hidden" value="0" id="prize_btn">
<script>
var myNumber;
var chooseNum = [];
var showNum = ''; //展示中奖
var arr = []; //index乱序数组
var bat3 = 0; //3等奖抽奖批次 default：2
var bat2 = 0; //2等奖抽奖批次 default：2
var bat1 = 0; //1等奖抽奖批次 default：1
var bats = 0; //特等奖抽奖批次 default：1
var codeT = [0, 1, 2, 3, 5, 6, 7, 8, 9]; //三等奖尾数数列
var code = []; /*随机所有的code并且不重复，通过createArr生成*/
var copy = []; //特等奖抽奖
var totalNum = 140; //参加抽奖总人数
var blackTime = true; // 特等奖后门flag。
/*生成数组*/
function createArr(totalNum) {
var code = [];
for (var i = 1, n = 1; n <= totalNum; i++) {
if (i % 10 != 4 && Math.floor(i / 10) % 10 != 4) {
code.push(i);
n++;
}
}
return code;
}
/*21特等奖抽奖方法*/
function showRandomNum(num, val) {
myNumber = setTimeout(function() {
var li = "";
var fcode = code;
if (val == "丰收特等奖")
fcode = copy;
for (var i = 0; i < fcode.length; i++) {
arr[i] = i;
}
arr.sort(function() {
return 0.5 - Math.random();
});
for (var i = 0; i < num; i++) {
var index = arr[i];
li += '<li>' + fcode[index] + '</li>';
chooseNum[i] = fcode[index];
}
$(".prize_list ul").html(li);
if (val == "丰收特等奖")
$('.prize_list li').css({
"font-size": "300px",
"width": "100%"
});
showRandomNum(num, val);
}, 30);
}
/*三等奖抽奖方法*/
function showRandomNum_3(num, val) {
myNumber = setTimeout(function() {
var li = "";
for (var i = 0; i < codeT.length; i++) {
arr[i] = i;
}
arr.sort(function() {
return 0.5 - Math.random();
});
for (var i = 0; i < num; i++) {
var index = arr[i];
li += '<li>' + codeT[index] + '</li>';
chooseNum[i] = codeT[index];
}
$(".prize_list ul").html(li);
showRandomNum_3(num, val);
}, 30);
}
/*抽奖逻辑*/
$(function() {
var luckList = ""; //保存中奖号码序列，最终格式如：<p>三等奖：x,x,x,x,x</p>，保存在隐藏的元素内，便于后台留记录
maxTimes = 1000;
code = createArr(totalNum);
copy = createArr(totalNum);
$(".start").click(function() {
if ($("#prize_btn").val() == 0) {
if ($("#set_grade").val() == "") {
return;
} else {
$("#prize_btn").val(1);
console.log(code.length);
$(".set_grade").hide(); //隐藏下拉框
if ($("#set_grade").val() == "丰收三等奖") {
//中奖人数
var num = 6;
/*分批次抽奖，根据需求设置每轮抽奖中奖人数
批次抽完之后若再次点击弹出提示框，并将抽奖按钮值重置为0
防止因为$("#prize_btn").val()值变化而导致的误操作
（若不重置，此时val为1，正常情况val会随回车改变，
此时若不按回车直接切换奖项，会使得val值为1进入下方else语句，从而其他奖项抽奖批次+1
减少了一次抽奖，导致误操作）
*/
if (bat3 == 0) {
showRandomNum_3(3, $("#set_grade").val());
} else if (bat3 == 1) {
showRandomNum_3(3, $("#set_grade").val());
} else {
$("#prize_btn").val(0);
}
} else if ($("#set_grade").val() == "丰收二等奖") {
var num = 10; //中奖人数
if (bat2 < 2)
showRandomNum(5, $("#set_grade").val());
else {
$("#prize_btn").val(0);
}
} else if ($("#set_grade").val() == "丰收一等奖") {
var num = 5; //中奖人数
if (bat1 < 1)
showRandomNum(num, $("#set_grade").val());
else {
$("#prize_btn").val(0);
}
} else if ($("#set_grade").val() == "丰收特等奖") {
var num = 1; //中奖人数
showRandomNum(num, $("#set_grade").val());
}
}
} else {
/*去除中奖数字
luckList 用于保存每次抽奖产生的奖等和中奖号码 最终输出在一个隐藏的<p>标签中
chooseNum为每次随机产生的中奖号码数组
*/
arr = [];
$("#prize_btn").val(0);
if ($("#set_grade").val() == "丰收三等奖") {
for (var i = 0; i < chooseNum.length; i++)
for (var t = 0; t < codeT.length; t++)
if (codeT[t] == chooseNum[i]) {
codeT.splice(t, 1);
}
/*剔除三等奖尾数号码*/
// for (var i = 0; i < chooseNum.length; i++)
// for (var t = 0; t < code.length; t++)
// if (code[t] % 10 == chooseNum[i]) {
// code.splice(t, 1);
// }
/*添加中奖序列，++bat,批次+1，记录抽奖批次*/
luckList += '<p>三等奖中奖号码：' + chooseNum + ',抽奖批次：' + ++bat3;
}
/*特等奖在copy（全部数字）中产生*/
else if ($("#set_grade").val() == "丰收特等奖") {
/*抽奖后门,暗箱操作仅1次*/
// if (blackTime) {
// chooseNum = [99];
// var li = '<li>' + chooseNum + '</li>';
// $(".prize_list ul").html(li);
// $('.prize_list li').css({
// "font-size": "300px",
// "width": "100%"
// });
// blackTime = false;
// }
for (var i = 0; i < chooseNum.length; i++)
for (var t = 0; t < copy.length; t++)
if (copy[t] == chooseNum[i]) {
copy.splice(t, 1);
break;
}
luckList += '<p>特等奖中奖号码：' + chooseNum + ',抽奖批次：' + ++bats;
} else {
for (var i = 0; i < chooseNum.length; i++)
for (var t = 0; t < code.length; t++)
if (code[t] == chooseNum[i]) {
code.splice(t, 1);
break;
}
if ($("#set_grade").val() == "丰收二等奖") {
luckList += '<p>二等奖中奖号码：' + chooseNum + ',抽奖批次：' + ++bat2;
// bat2++
}
if ($("#set_grade").val() == "丰收一等奖") {
luckList += '<p>一等奖中奖号码：' + chooseNum + ',抽奖批次：' + ++bat1;
// bat1++;
}
}
for (var i = 0; i < chooseNum.length; i++)
showNum += '<li>' + chooseNum[i] + '</li>';
luckList += '</p>';
console.log(luckList);
$(".luckyList").html(luckList);
chooseNum = [];
clearTimeout(myNumber);
}
});
/* 键盘事件快捷键控制
* 数字键为英文上方数字
*/
$(document).keydown(
function(event) {
var e = event || window.event ||
arguments.callee.caller.arguments[0];
if (e && e.keyCode == 51) {
// 3 键 设置三等奖
if (bat3 >= 2)
return;
$("#set_grade").val("丰收三等奖");
$(".prize_grade span").text("丰收三等奖");
$('.prize_list li').css("display", "none");
} else if (e && e.keyCode == 50) {
// 2 键 设置二等奖
if (bat2 >= 2)
return;
$("#set_grade").val("丰收二等奖");
$(".prize_grade span").text("丰收二等奖");
$('.prize_list li').css("display", "none");
} else if (e && e.keyCode == 49) {
// 1 键 设置一等奖
if (bat1 >= 1)
return;
$("#set_grade").val("丰收一等奖");
$(".prize_grade span").text("丰收一等奖");
$('.prize_list li').css("display", "none");
} else if (e && e.keyCode == 48) {
// 0 键 设置特等奖
if (bats >= 1)
return;
$("#set_grade").val("丰收特等奖");
$(".prize_grade span").text("丰收特等奖");
$('.prize_list li').css("display", "none");
} else if (e && e.keyCode == 83) {
// s 键 展示中奖幸运数字
if (showNum == '' ||
$("#set_grade").val() == "丰收特等奖")
return;
$('.prize_list ul').html(showNum);
if ($("#set_grade").val() == "丰收三等奖") {
$('.prize_list li').css({
"width": "33%"
});
}
showNum = '';
}
if (e && e.keyCode == 13) {
// enter 键 控制开始抽奖
$(".start").click();
}
});
});
</script>
</body>
</html>
类似资料：