随机点名-案例
就是一组数组，然后随机加DOM
<!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>
<body>
<h1>天气不错去散步</h1>
<h2>xxx</h2>
<script>
let name = ["赵云", "黄忠", "关羽", "张飞", "马超", "刘备", "曹操"];
let nameDom = document.querySelector('h2');
function getName(max, min) {
return Math.round(Math.random() * (max - min) + min);
}
let sum = getName(0, 6);
console.log(sum);
nameDom.innerText = name[sum];
</script>
</body>
</html>
颜色随机（伪随机）案例
就是一组数组，然后随机加DOM
<!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>
<body>
<!-- <img src="./img/1.png" alt=""> -->
</body>
<script>
let imgDom = document.querySelector('body')
let bodys = ['red', 'yellow', 'pink', 'blue', 'skyblue']
let index = Math.round(Math.random() * 4)
imgDom.style.backgroundColor = `${bodys[index]}`
</script>
</html>
颜色随机（随机）案例
就是一组数组，然后随机加DOM
<!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>
<body>
<script>
function fun(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
let color1 = fun(0, 255)
let color2 = fun(0, 255)
let color3 = fun(0, 255)
//无限随机
document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`
//用rbg（）来无限随机
</script>
</body>
</html>
背景图片随机-案例
就是一组数组，然后随机加DOM
<!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>
<body>
<!-- <img src="./img/1.png" alt=""> -->
</body>
<script>
let imgDom = document.querySelector('body')
let bodys = [
'./img/1.png',
'./img/2.png',
'./img/3.png'
]
let index = Math.round(Math.random() * 2)
imgDom.style.backgroundImage = `url(${bodys[index]})`
</script>
</html>
图片随机-案例
就是一组数组，然后随机加DOM
<!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>
<body>
<img src="./img/1.png" alt="">
</body>
<script>
let imgDom = document.querySelector('img')
let imgs = [1, 2, 3]
let index = Math.round(Math.random() * 2)
imgDom.src = `./img/${imgs[index]}.png`
</script>
</html>
