文章目录
- 前言
- 实现过程
- 1.前期准备
- 2.CSS美化
- 3.使用 js 完成抽奖功能
- 3.1 随机数模块
- 3.2 随机奖品
- 3.3 开始抽奖
- 3.4 点击开始抽奖
- 完整代码
- HTML部分
- CSS部分
- 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按钮
- 给盒子设置弹性布局,使用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 = document.getElementById('top').querySelectorAll('span');
console.log(top_spans);
// 获取人员名单
let mian_spans = document.getElementById('main').querySelectorAll('span');
console.log(mian_spans);
// 获取抽奖按钮
let luck_btn = document.getElementById('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部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
<link rel="stylesheet" href="./css/index.css">
<script src="./js/index.js"></script>
</head>
<body>
<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>
</body>
</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 {
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;
}
/* 主体 */
#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;
}
/* 抽奖 */
#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;
}
js部分
// DOMContentLoaded不包含图片 falsh css 等就可以执行
window.addEventListener('DOMContentLoaded', function() {
// console.log(123);
// 获取提示信息
let top_spans = document.getElementById('top').querySelectorAll('span');
console.log(top_spans);
// 获取人员名单
let mian_spans = document.getElementById('main').querySelectorAll('span');
console.log(mian_spans);
// 获取抽奖按钮
let luck_btn = document.getElementById('luck_btn').querySelector('button');
console.log(luck_btn);
//抽奖功能一共有三个模块
// 1.生成随机数
// 2.获得的奖品
// 3.开始抽奖
// 1随机数
function randomNumber(min, max) {
// 比较两数之间的大小
// 这里用三元运算符来作比较
let _max = max > min ? max : min;
let _min = min < max ? min : max;
// 返回随机数区间
return Math.floor(Math.random() * _max + _min)
}
// 2随机奖品
function randomPrize() {
// 用数组存放奖品
let prize = ["你不知道的JavaScript", "Python从入门到精通", "Node.js深入浅出", "谢谢参与"]
// 返回抽到的值
return prize[Math.floor(Math.random() * prize.length + 0)]
}
// 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();
}
luck_btn.addEventListener("click", function() {
if (this.innerHTML == "开始抽奖") {
this.innerHTML = "停止抽奖";
// 调用抽奖模块
item = setInterval(luckDraw, 50)
} else {
this.innerHTML = "开始抽奖";
clearInterval(item);
}
})
})
总结
以上就是抽奖功能的完整代码,如果有什么写的不对的地方,请指正.