Skip to content

L
lottery
Commit f2f77210 authored by fushaowu's avatar fushaowu
Browse files
Options

fix: + 代码修改 & 添加中奖概率显示页面

parent 033cee84
Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 184 deletions
src/admin.html
View file @ f2f77210
......@@ -17,66 +17,68 @@
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-wrap: wrap;
}
.form {
display: flex;
.form {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.btn-box {
margin-top: 30px;
display: flex;
width: 100%;
}
.btn-box {
margin-top: 30px;
display: flex;
justify-content: center;
width: 100%;
width: 100%;
align-items: center;
}
</style>
}
</style>
<script src="./info.js"></script>
</head>
<body>
<div id="admin">
<div>
<div class="form">
<div>
<label for="" style="margin-left: 50px">人数：</label>
<input type="number" name="" id="num" style="width: 100px" />
</div>
<div>
<label for="" style="margin-left: 50px">标题：</label>
<input type="text" name="" id="title" style="width: 300px" />
</div>
<div>
<label for="" style="margin-left: 50px">奖品信息：</label>
<input type="text" name="" id="info" style="width: 300px" />
</div>
</div>
<div class="btn-box">
<div><button style="margin-left: 50px" onclick="submit()">打开抽奖页面</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./list.html')">打开中奖人员名单</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=10&title=一等奖&info=奖品：macpro一部')">一等奖</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=20&title=二等奖&info=奖品：mac air一部')">二等奖</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=30&title=三等奖&info=奖品：iphone 12一部')">三等奖</button></div>
</div>
</div>
<div>
<div class="form">
<div>
<label for="" style="margin-left: 50px">人数：</label>
<input type="number" name="" id="num" style="width: 100px" />
</div>
<div>
<label for="" style="margin-left: 50px">标题：</label>
<input type="text" name="" id="title" style="width: 300px" />
</div>
<div>
<label for="" style="margin-left: 50px">奖品信息：</label>
<input type="text" name="" id="info" style="width: 300px" />
</div>
</div>
<div class="btn-box">
<div><button style="margin-left: 50px" onclick="submit()">打开抽奖页面</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./list.html')">打开中奖人员名单</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./data.html')">百万次人均中奖次数展示</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=10&title=一等奖&info=奖品：macpro一部')">一等奖</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=20&title=二等奖&info=奖品：mac air一部')">二等奖</button></div>
<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=30&title=三等奖&info=奖品：iphone 12一部')">三等奖</button></div>
</div>
</div>
</div>
<script>
function submit() {
let winPerson = localStorage.getItem('yit') ? JSON.parse(localStorage.getItem('yit')) : {}
let num = document.getElementById('num').value;
let title = document.getElementById('title').value;
let info = document.getElementById('info').value;
if(winPerson[title]) {
let status = window.confirm('该标题已存在，跳转至抽奖结果页面')
status && window.open('./list.html')
} else {
if (num && title) {
window.open(`./lottery.html?num=${num}&title=${title}&info=${info}`);
} else {
alert('请输入人数和标题')
}
}
let num = document.getElementById('num').value;
let title = document.getElementById('title').value.trim();
let info = document.getElementById('info').value;
let winPerson = localStorage.getItem('yit') ? JSON.parse(localStorage.getItem('yit')) : {};
if (winPerson[title]) {
let status = window.confirm('该标题已存在，跳转至抽奖结果页面');
status && window.open('./list.html');
} else {
if (num && title) {
window.open(`./lottery.html?num=${num}&title=${title}&info=${info}`);
} else {
alert('请输入人数和标题');
}
}
}
</script>
</script>
</body>
</html>
src/data.html 0 → 100644
View file @ f2f77210
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>百万次人均中奖次数展示</title>
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./style/common.css" />
<script src="./vue.js"></script>
<script src="./info.js"></script>
</head>
<body>
<div id="app">
<div class="list-item" >
<h3 class="title">百万次人均中奖次数展示</h3>
<div class="jump-box" style="margin-left: 20px">
<div v-for="it in personList" class="jump-item">{{it.name}} {{it.times}}</div>
</div>
</div>
</div>
<script>
let dataVue = new Vue({
el: '#app',
data: () => {
return {
personList: [],
};
},
created() {
setTimeout(() => {
this.personList = this.stressTest();
}, 0)
},
methods: {
getRandomPerson(num = 1) {
let candidateList = [...allPersonInfoMap.values()];
if (num > candidateList.length) {
num = candidateList.length;
}
// 该批次名单
let currentWinPersonMap = new Map();
while (currentWinPersonMap.size < num) {
let random = Math.floor(Math.random() * candidateList.length);
currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
}
return [...currentWinPersonMap.values()];
},
stressTest(times = 100 * 10000) {
let map = new Map();
let index = 0;
for (; index < times; index++) {
let { name } = this.getRandomPerson()[0];
if (map.has(name)) {
map.set(
name,
Object.assign({}, map.get(name), {
[times]: (map.get(name)[times] || 0) + 1,
})
);
} else {
map.set(
name,
Object.assign({}, map.get(name), {
[times]: 1,
})
);
}
}
let list = [];
let data = [...map.entries()];
for (const key in data) {
list.push({
name: data[key][0],
times: data[key][1][times],
});
}
return list.sort((a, b) => a.times - b.times);
},
},
});
</script>
</body>
</html>
src/info.js
View file @ f2f77210
const personInfoList = [
const allpersonInfoList = [
{ "name": "朱楠", "firstLevelDepartment": "内容事业部" },
{ "name": "王君", "firstLevelDepartment": "新零售事业部" },
{ "name": "王雯丽", "firstLevelDepartment": "内容事业部" },
......@@ -452,9 +452,9 @@ const personInfoList = [
{ "name": "徐沪生", "firstLevelDepartment": "总裁办" }
]
const personInfoMap = (() => {
const allPersonInfoMap = (() => {
let map = new Map()
personInfoList.forEach(val => {
allpersonInfoList.forEach(val => {
map.set(val.name, val)
})
return map
......
src/lottery.html
View file @ f2f77210
......@@ -17,7 +17,7 @@
<div class="info" v-if="awardInfo">奖品：{{awardInfo}}</div>
</div>
<div v-if="step !== 1" class="step2">
<h3>幸运员工&nbsp;&nbsp;({{statusText}})</h3>
<h3>幸运员工&nbsp;&nbsp;({{lotteryStatus ? '抽奖完成' : '抽奖中...'}})</h3>
<div class="jump-box">
<div v-for="item in activePersonList" class="jump-item">{{item.name}} {{item.firstLevelDepartment}}</div>
</div>
......
src/lottery.js
View file @ f2f77210
/**
*
* @param {*} status true: 把中奖名单删除
*/
function randomNPerson(num, candidateMap) {
let candidateList = [...candidateMap.values()];
if (num > candidateList.length) {
num = candidateList.length;
}
// 该批次名单
let currentWinPersonMap = new Map();
while (currentWinPersonMap.size < num) {
let random = Math.floor(Math.random() * candidateList.length);
currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
candidateList.splice(random, 1); // 删除中奖人员名单
}
return [...currentWinPersonMap.values()];
}
/**
* 获取所有未中过奖名单
*/
function getCandidateMap() {
let winPerson = localStorage.getItem('yit');
if (winPerson) {
winPerson = JSON.parse(winPerson);
for (const key in winPerson) {
winPerson[key].forEach(val => {
personInfoMap.delete(val.name);
});
}
}
return personInfoMap;
}
/**
* 抽奖开始
*/
function start(num) {
var candidateMap = getCandidateMap();
if (candidateMap.size === 0) {
let status = window.confirm('没有未中奖人员, 去往抽奖结果页面');
if (status) {
window.open('./list.html');
} else {
vue.activePersonList = [];
vue.step = 1;
vue.statusText = '抽奖完成';
}
return;
}
vue.interval = setInterval(() => {
vue.activePersonList = randomNPerson(num, candidateMap);
}, 100);
}
/**
*
* 抽奖结束
*/
function end() {
let winPerson = {};
let activePersonList = getLotteryList(true);
if (localStorage.getItem('yit')) {
winPerson = JSON.parse(localStorage.getItem('yit'));
}
winPerson[vue.awardTitle] = activePersonList;
localStorage['yit'] = JSON.stringify(winPerson);
vue.activePersonList = activePersonList;
}
/**
*
* @param {*} event enter 触发
*/
function next(event) {
if (event.keyCode === 13) {
if (vue.step === 1) {
vue.step = 2;
} else if (vue.step === 2) {
if (vue.interval) {
clearInterval(vue.interval);
vue.interval = null;
vue.statusText = '抽奖完成';
end();
}
}
}
}
let vue = new Vue({
el: '#v1',
data: () => {
......@@ -99,20 +9,24 @@ let vue = new Vue({
winPersonList: {}, // 中奖人员名单 列表页面
interval: null,
num: 0, // 抽奖人数
statusText: '抽奖中...',
lotteryStatus: false,
candidateMap: null, // 未中奖人员集合
};
},
created() {
this.init()
this.init();
},
watch: {
step(newValue) {
if (newValue === 2) {
start(this.num);
this.start(this.num);
}
},
},
methods: {
/**
* 初始化
*/
init() {
this.winPersonList = JSON.parse(localStorage.getItem('yit') || '{}');
let urlParams = window.decodeURI(location.href).split('?')[1]?.split('&');
......@@ -127,5 +41,97 @@ let vue = new Vue({
this.awardInfo = params.info;
}
},
/**
*
* @param {*} status true: 把中奖名单删除
*/
getRandomPerson() {
let candidateList = [...this.candidateMap.values()];
if (this.num > candidateList.length) {
this.num = candidateList.length;
}
// 该批次名单
let currentWinPersonMap = new Map();
while (currentWinPersonMap.size < this.num) {
let random = Math.floor(Math.random() * candidateList.length);
currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
candidateList.splice(random, 1); // 删除中奖人员名单
}
return [...currentWinPersonMap.values()];
},
/**
* 获取所有未中过奖名单
*/
getCandidateMap() {
let winPersonStr = localStorage.getItem('yit');
this.candidateMap = new Map();
[...allPersonInfoMap.keys()].forEach(k => this.candidateMap.set(k, allPersonInfoMap.get(k)));
if (winPersonStr) {
let winPerson = JSON.parse(winPersonStr);
for (const key in winPerson) {
winPerson[key].forEach(val => {
this.candidateMap.delete(val.name);
});
}
}
},
/**
* 抽奖开始
*/
start() {
this.getCandidateMap();
let activePersonList = [];
if (this.candidateMap.size === 0) {
let status = window.confirm('没有未中奖人员, 去往抽奖结果页面');
if (status) {
window.open('./list.html');
} else {
this.step = 1;
activePersonList = [];
this.lotteryStatus = false;
}
return;
}
this.interval = setInterval(() => {
this.activePersonList = this.getRandomPerson();
}, 100);
},
/**
*
* 抽奖结束
*/
end() {
let winPerson = {};
let activePersonList = this.getRandomPerson();
if (localStorage.getItem('yit')) {
winPerson = JSON.parse(localStorage.getItem('yit'));
}
winPerson[this.awardTitle] = activePersonList;
localStorage['yit'] = JSON.stringify(winPerson);
this.activePersonList = activePersonList;
},
},
});
/**
*
* @param {*} event enter 触发
*/
function next(event) {
if (event.keyCode === 13) {
if (vue.step === 1) {
vue.step = 2;
} else if (vue.step === 2) {
if (vue.interval) {
clearInterval(vue.interval);
vue.interval = null;
vue.lotteryStatus = true;
vue.end();
}
}
}
}
src/style/common.css
View file @ f2f77210
html, body {
width: 100%;
html,
body {
width: 100%;
}
* {
padding: 0;
margin: 0;
padding: 0;
margin: 0;
}
#v1 {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.step1 {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.title, .info {
text-align: center;
.title,
.info {
text-align: center;
}
.title {
letter-spacing: 10px;
font-size: 32px;
letter-spacing: 10px;
font-size: 32px;
}
.info {
margin-top: 20px;
font-size: 16px;
margin-top: 20px;
font-size: 16px;
}
.step2 {
padding-top: 35vh;;
width: 100%;
text-align: center;
padding-top: 35vh;
width: 100%;
text-align: center;
}
.jump-item {
background-color: #dda9e6;
margin-left: 2%;
margin-right: 2%;
height: 50px;
line-height: 50px;
width: 16%;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
background-color: #dda9e6;
margin-left: 2%;
margin-right: 2%;
height: 50px;
line-height: 50px;
width: 16%;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.jump-box {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.list-item:nth-child(1) h3 {
padding-top: 30px;
}
\ No newline at end of file
padding-top: 30px;
}
.loading {
width: 80px;
height: 40px;
margin: 0 auto;
margin-top: 100px;
}
.loading span {
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load {
0%,
100% {
height: 40px;
background: lightgreen;
}
50% {
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2) {
-webkit-animation-delay: 0.2s;
}
.loading span:nth-child(3) {
-webkit-animation-delay: 0.4s;
}
.loading span:nth-child(4) {
-webkit-animation-delay: 0.6s;
}
.loading span:nth-child(5) {
-webkit-animation-delay: 0.8s;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment