前言
Math对象是JavaScript的内置对象，而random是Math对象属性
Math.random（）函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后你可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
一、每次打印都输出一个随机数
// 求随机数
console.log(Math.random());//0-1之间小数
var arr = ['上官婉儿','萌芽','甄姬','虞姬','典韦'];
function Random(arr){
var index = parseInt(Math.random() * arr.length);
console.log(arr[index])
}
Random(arr);代码运行结果如下：
二、生成随机圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
for (var i = 0; i < 100; i++) {
//创建元素
var div = document.createElement("div")
div.classList.add("div")
//
var widts = Math.random() * 50 + 30
var tops = Math.random() * (innerHeight - widts)
var lefts = Math.random() * (innerWidth - widts)
console.log(tops);
console.log(lefts);
div.style.width = widts + "px"
div.style.height = widts + "px"
div.style.left = lefts + "px"
div.style.top = tops + "px"
//0-255
function cl() {
return col1 = Math.floor(Math.random() * 256)
}
var r = cl()
var g = cl()
var b = cl()
div.style.backgroundColor = `rgb(${r},${g},${b})`
document.body.append(div)
}
</script>
<style>
div {
position: fixed;
border-radius: 50%;
}
</style>代码运行结果如下：
三、随机点名案例（由案例一延伸）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
margin: 100px auto;
padding: 50px;
width: 600px;
background-color: rgb(156, 3, 3);
background-image: url(./festival.jpg);
background-position: center;
background-size: cover;
border: 5px solid gold;
border-radius: 5px;
}
.content {
display: flex;
margin: 50px auto;
width: 600px;
font-size: 25px;
text-align: center;
line-height: 40px;
color: goldenrod;
}
.content span {
padding: 10px 0;
}
.qs {
padding: 10px;
width: 450px;
height: 40px;
background-color: #000;
color: gold;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<div class="box">
<h2>随机点名</h2>
<div class="content">
<span>名字是：</span>
<div class="qs">幸运嘉宾</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
</div>
<script>
// 数据数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞','曹操','孙权']
// 业务1. 开始按钮模块
// 定时器全局变量
let timeId = 0
// 随机号全局变量
let random = 0
// 1.1 获取姓名区域对象
const uname = document.querySelector('.qs')
// 1.2 获取开始按钮对象
const start_btn = document.querySelector('.btns .start')
// 1.3 添加点击事件
start_btn.addEventListener('click', function () {
// 开启定时器
timeId = setInterval(function () {
// 随机数
random = Math.floor(Math.random() * arr.length)
// console.log(arr[random]);
uname.innerHTML = arr[random]
}, 50)
// 点击开始按钮，禁用开始按钮
start_btn.disabled = true
// 如果数组里面只有一个值、不需要抽取，直接禁用开始、结束按钮
if (arr.length === 1) {
// start_btn.disabled = true
// end_btn.disabled = true
start_btn.disabled = end_btn.disabled = true
}
})
// 业务2. 结束按钮模块
// 2.1 获取结束按钮对象
const end_btn = document.querySelector('.btns .end')
// 2.2 添加点击事件
end_btn.addEventListener('click', function () {
// 点击结束按钮，启用开始按钮
start_btn.disabled = false
// 关闭定时器
clearInterval(timeId)
console.log(arr[random]);
// 结束，删除抽到的对应数组元素
arr.splice(random, 1)
console.log(arr);
})
</script>
</body>
</html>代码运行结果如下：
开始界面：
结束界面：
