原⽣js完成⼀个简单的抽奖功能
⽂章⽬录
前⾔
抽奖在我们⽣活中经常见到，例如上课点名，商场活动等，今天就教⼤家怎么⽤原⽣js写⼀个抽奖功能的代码。
实现过程
1.前期准备
虽然这个控件功能单⼀，但我们还是需要先分析⼀下它的结构，以及实现的功能
⾸先是HTML结构部分,HTML结构代码如下:
<div class="box">
<!-- 头部 -->
<div id="top">
学号: <span>xx</span>姓名:
<span>xxx</span>奖项:
<span>xxx</span>
</div>
<!-- 主体部分 -->
<div id="main">
<span>张晨曦</span>
<span>曹晨磊</span>
<span>萧炎</span>
<span>周润发</span>
<span>王思聪</span>
<span>⽑不易</span>
<span>房东的猫</span>
<span>周杰伦</span>
<span>薛之谦</span>
<span>张⾬⽣</span>
<span>沈腾</span>
<span>张杰</span>
<span>林俊杰</span>
<span>张碧晨</span>
<span>汪苏泷</span>
<span>双笙</span>
<span>胡歌</span>
<span>张艺兴</span>
<span>刘德华</span>
<span>黎明</span>
<span>张学友</span>
<span>郭富城</span>
<span>张若昀</span>
<span>雷军</span>
<span>余承东</span>
<span>卢伟冰</span>
<span>提灯寻猫</span>
</div>
<!-- 抽奖按钮 -->
<div id="luck_btn">
<button>开始抽奖</button>
</div>
</div>
看上去是不是很简单，⼀共分成了3个部分
头部分放置中奖者的信息
主体部分放置参与的⼈员
尾部部分放置抽奖按钮来控制中奖⼈是谁
2.CSS美化
HTML基本的样式我们已经搭建好了，但这样的页⾯看上去很"丑"，接下来我们就⽤CSS给HTML页⾯打扮⼀番。
⾸先我们要清除浏览器⾃带的默认边距，将每个盒⼦设置为CSS盒⼦模型，这样的话，我们的盒⼦不会因为内边距和边框使得盒⼦撑⼤起来。接着我们给整体的⼤盒⼦设置宽⾼，让盒⼦居中显⽰，给盒⼦来⼀个边框，看上去不会那样单⼀。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 660px;
height: 600px;
/* background-color: aqua; */
margin: 50px auto;
border: 1px solid #e1e1e1;
}
接下来就是对头部部分进⾏⼀次处理
给头部部分的盒⼦(top)设置宽⾼，实际上宽是不⽤设置的，它会继承⽗类的宽
给这个盒⼦设置弹性布局，使得⾥⾯的每⼀个⼦项都会变成⾏内块元素
使⽤justify-content: center 和 align-items:center使⼦项⽔平垂直⽅向上实现居中效果
因为这⾥的主轴和交叉轴，我们没有调，所以⼀切按默认的来
#top{
display: flex;
justify-content: center;
width: 100%;
height: 30px;
/* background-color: aquamarine; */
/* padding: 0 16px; */
align-items: center;
border: 1px solid #e1e1e1;
}
#top span{
color: red;
font-size: 12px;
margin: 0 15px;
}
到了我们的重头戏——主体部分，为什么说是重头戏，因为这⾥牵扯了很多知识点，初学HTML的⼩伙伴⼀想到的就是我中间套⼀个 ul , ul 由多个 li 组成，在利⽤浮动进⾏排版。⽽这种⽅式并不是最好的，我们可以采⽤⼀种新颖的布局⽅式——⽹格布局。
ps：博主也是⽤这样的⽅式进⾏布局，但学到了⽹格布局，才觉得这⽹格布局也太神奇了
⾸先我们要将主体部分设置为⽹格布局( display=“gird” )，使得每⼀个⼦项变为⾏内块元素
将每⼀个⼦项进⾏四等分(grid-template-columns: 1fr 1fr 1fr 1fr;)，这样的话，每⼀个⼦项的⼤⼩就是⼀样的
使⽤grid-row-gap 和 grid-column-gap设置⼦项的⾏列间距
给每⼀个⼦项设置弹性布局，使⽤justify-content: center 和 align-items:center使⼦项中的元素⽔平垂直⽅向上实现居中效果
#main{
display: grid;
width: 100%;
/* 将布局中的元素4等分 */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* 每个⼦项之间的⾏列间隙为20px */
grid-row-gap: 20px;
grid-column-gap: 20px;
}
#main span{
display: flex;
justify-content: center;
align-items: center;
height: 40px;
background-color: skyblue;
}
最后就是我们的尾部部分，布局⼗分简单
使⽤⼀个div盒⼦包住⼀个button按钮python生成1到100之间随机数
给盒⼦设置弹性布局，使⽤justify-content: center是⼦项居中显⽰即可
#luck_btn{
width: 100px;
height: 50px;
margin: 50px auto;
}
#luck_btn button{
width: 100px;
height: 50px;
}
/* 抽中后显⽰的样式 */
#main .show{
background-color: thistle;
border: 1px solid yellow;
}
3.使⽤ js 完成抽奖功能
这⾥我们⽤外部引⼊js⽅式来做。
⾸先我们要写⼀个⼊⼝函数
// DOMContentLoaded不包含图⽚ falsh css 等就可以执⾏
window.addEventListener('DOMContentLoaded',function(){
})
接着我们要获取事件源(看上去很长，但是可以准确的获取到我们需要的元素)
// 获取提⽰信息
let top_spans = ElementById('top').querySelectorAll('span');
console.log(top_spans);
/
/ 获取⼈员名单
let mian_spans = ElementById('main').querySelectorAll('span');
console.log(mian_spans);
// 获取抽奖按钮
let luck_btn = ElementById('luck_btn').querySelector('button');
对于我们的抽奖功能来说，它由三⼤模块组成
1.⽣成随机数
2.获得的奖品
3.开始抽奖
3.1 随机数模块
主要⽤到Math数学对象中的random()⽅法来完成
function randomNumber(min, max){
// ⽐较两数之间的⼤⼩
// 这⾥⽤三元运算符来作⽐较
// 这⾥不要命名和形参⼀样的变量，会造成变量冲突的问题
let _max = max > min ? max : min;
let _min = min < max ? min : max;
// 返回随机数区间
return Math.floor(Math.random()* _max + _min)
}
3.2 随机奖品
通过数组的⽅式存放奖品
function randomPrize(){
// ⽤数组存放奖品
let prize =["你不知道的JavaScript","Python从⼊门到精通","Node.js深⼊浅出","谢谢参与"] // 返回抽到的值
return prize[Math.floor(Math.random()* prize.length +0)]
}
3.3 开始抽奖
这⼀块的内容主要调⽤了上⾯两⼤模块来完成
function luckDraw(){
//⽣成随机数
let num =randomNumber(0, mian_spans.length);
// console.log(num);
// 这⾥⽤到排他思想
for(let i =0; i < mian_spans.length; i++){
mian_spans[i].className ='';
}
// ⾃⾝添加类
mian_spans[num].classList ='show';
// 这⾥使⽤了补0操作
// 操作学号
let temp = num <10?"0"+ num : num
top_spans[0].innerHTML =+temp +1;
// 操作中奖⼈
top_spans[1].innerHTML = mian_spans[num].innerHTML;
// 抽中的奖品
top_spans[2].innerHTML =randomPrize();
}
3.4 点击开始抽奖
这⾥我们给获取到的按钮luck_draw添加⼀个点击事件
点击后将“开始抽奖”变为“停⽌抽奖”
通过计时器的⽅式来调⽤开始抽奖这个模块，即setInterval() ⽅法，这⾥⾯有两个参数，第⼀个为⼀个回调函数，第⼆个为时间，这⾥的时间是以毫秒为单位
我们要停⽌时.就要将"停⽌抽奖"改为“开始抽奖”，并使⽤ clearInterval() 的⽅式清除定时器，同时我们要⽤⼀个变量将上⾯的定时器存储起来，因为我们清除定时器是要穿⼀个值进去,⽽⾮⼀个匿名函数
luck_btn.addEventListener("click",function(){
if(this.innerHTML =="开始抽奖"){
this.innerHTML ="停⽌抽奖";
// 调⽤抽奖模块
item =setInterval(luckDraw,50)
}else{
this.innerHTML ="开始抽奖";
clearInterval(item);
}
})
完整代码
HTML部分

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。