- 作者简介:一名后端开发人员,每天分享后端开发以及人工智能相关技术,行业前沿信息,面试宝典。
- 座右铭:未来是不可确定的,慢慢来是最快的。
- 个人主页:极客李华-CSDN博客
- 合作方式:私聊+
- 这个专栏内容:BAT等大厂常见后端java开发面试题详细讲解,更新数目100道常见大厂java后端开发面试题。
- 我的CSDN社区:https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
- 微信公众号,抖音,b站等平台统一叫做:极客李华,加入微信公众号领取各种编程资料,加入抖音,b站学习面试技巧,职业规划
html+css+js写抽奖程序
简介:本文讲解,如何使用html+css+js写抽奖程序,后面也会加上后端,记录每一次的抽奖的结果。
HTML结构
这个html结构就十分的简单,几行而已。
<body>
<div class="box">
<div id="top"></div>
<input id="input">
<div class="btn">
<button id="btn">抽奖</button>
</div>
</div>
</body>
CSS结构
通过简单的css的渲染,然后使得这个显示的结果是这个样子,这些都是很简单那的,主要是需要思考的是这个,js的逻辑怎么编写。
<style>
.box{
margin: 50% 50%;
display: inline-block;
}
.btn{
display: inline-block;
margin-left: 40%;
}
#top{
margin-left: 15%;
}
</style>
js逻辑
-
这是本程序最需要思考的地方,比如如何产生随机数了,我这里如何产生[n,m]之间的随机数,使用的方法就是,使用公式
Math.floor(Math.random() * (m - n + 1)) + 1
,通过这个公式就可以产生[n,m]之间的随机数。 -
当我们完成了随机数的产生工作之后,现在需要思考的就是,我们产生的随机数需要可以重复,这个时候,我们遇到重复了的之后,就需要重来一次。
依靠的就是Set容器的has方法就可以判断是否,这个当前的随机值已经在容器中存在了,然后了如果存在了的话,在使用那么就通过循环重新生成一次,直到这个结果不同了为止,这个是利用Set容器的特性实现的。 -
然后当我们现在抽到奖品了之后,我们现在需要的是,如何将对应的奖品号,与奖品信息对应,一般人可能的最直接的想法就是if或者是switch容器的方法,但是了我这里用到的就是Map字典,通过这个可以更好的实现这个功能,对于没有中中奖的号码,我们反馈的是谢谢惠顾字样。
代码如下:
<script>
function fcRandom(n, m){
// 生成范围为[n, m]的随机数
let r = Math.floor(Math.random() * (m - n + 1)) + 1;
return r;
}
// 默认抽奖次数
var cnt = 3;
var top = document.getElementById("top").innerHTML = "现在还剩" + cnt + "次机会";
var input = document.getElementById("input");
var btn = document.getElementById("btn");
// 存放用户的抽奖结果
var set = new Set();
// 存放抽奖号与与之对应的奖品信息
let mp = new Map([
[1, "一等奖"],
[33, "二等奖"],
[95, "三等奖"],
[100, "四等奖"],
[99 , "五等奖"]
]);
// console.log(mp.get(2)===undefined);
document.getElementById("btn").onclick = function(){
cnt --;
// console.log(cnt)
top = document.getElementById("top").innerHTML = "现在还剩" + cnt + "次机会";
// 生成抽奖号[1, 100]
let res = fcRandom(1, 100);
// 去重检测
while(set.has(res)){
res = fcRandom(1, 100);
}
// 不重复的话就加进去
set.add(res);
if (mp.get(res)===undefined){
res = "抽奖号为:" + res + " 奖品为:" + "谢谢惠顾";
} else {
res = "抽奖号为:" + res + " 奖品为:" + mp.get(res);
}
input.value= res;
if (cnt <= 0){
// 机会用完了之后,把按钮设置为禁用
alert("你的机会已经用完了");
btn.setAttribute("disabled",true);
input.value="谢谢惠顾";
}
let a = new Set();
// console.log("我被点了")
}
</script>
完整代码
<!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>Document</title>
</head>
<style>
.box{
margin: 50% 50%;
display: inline-block;
}
.btn{
display: inline-block;
margin-left: 40%;
}
#top{
margin-left: 15%;
}
</style>
<body>
<div class="box">
<div id="top"></div>
<input id="input">
<div class="btn">
<button id="btn">抽奖</button>
</div>
</div>
</body>
<script>
function fcRandom(n, m){
// 生成范围为[n, m]的随机数
let r = Math.floor(Math.random() * (m - n + 1)) + 1;
return r;
}
// 默认抽奖次数
var cnt = 3;
var top = document.getElementById("top").innerHTML = "现在还剩" + cnt + "次机会";
var input = document.getElementById("input");
var btn = document.getElementById("btn");
// 存放用户的抽奖结果
var set = new Set();
// 存放抽奖号与与之对应的奖品信息
let mp = new Map([
[1, "一等奖"],
[33, "二等奖"],
[95, "三等奖"],
[100, "四等奖"],
[99 , "五等奖"]
]);
// console.log(mp.get(2)===undefined);
document.getElementById("btn").onclick = function(){
cnt --;
// console.log(cnt)
top = document.getElementById("top").innerHTML = "现在还剩" + cnt + "次机会";
// 生成抽奖号[1, 100]
let res = fcRandom(1, 100);
// 去重检测
while(set.has(res)){
res = fcRandom(1, 100);
}
// 不重复的话就加进去
set.add(res);
if (mp.get(res)===undefined){
res = "抽奖号为:" + res + " 奖品为:" + "谢谢惠顾";
} else {
res = "抽奖号为:" + res + " 奖品为:" + mp.get(res);
}
input.value= res;
if (cnt <= 0){
// 机会用完了之后,把按钮设置为禁用
alert("你的机会已经用完了");
btn.setAttribute("disabled",true);
input.value="谢谢惠顾";
}
let a = new Set();
// console.log("我被点了")
}
</script>
</html>
如果大家觉得有用的话,可以关注我下面的微信公众号,极客李华,我会在里面更新更多行业资讯,企业面试内容,编程资源,如何写出可以让大厂面试官眼前一亮的简历等内容,让大家更好学习编程,我的抖音,B站也叫极客李华。大家喜欢也可以关注一下