JavaScript 随机变颜色和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Math内置函数</title>
<style>
.box {
display: flex;
text-align: center;
}
.item {
flex: 1;
}
</style>
</head>
<body>
<div class="box" onclick="update()">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="item">5</div>
<script>
// 即使只有一个box,也是返回的一个数组集合
var box = document.getElementsByClassName('box')[0];
console.log(box);
// 获取box下面的item, class 是可以通过用元素对象获取,但是id(唯一)只能用document获取
items = box.getElementsByClassName('item');
console.log(items);
// 定义update函数,并且指定形参 n1 和 n2
// 不传参数,默认50-500的范围,不传递,形参是undefined
function update(n1 = 50,n2 = 500) {
console.log(n1,n2);
// 优化处理 防止使用者不传递参数
n1 = n1 == undefined ? 50 : n1;
n2 = n2 == undefined ? 500 : n2;
// 只允许传递数字number类型
// typeof n1 返回字符串类型
if(typeof n1 != 'number' || typeof n2 != 'number') {
// alert("我只能是个数字");
// 主动抛出异常,结束程序执行
throw "参数只能是个数字";
}
var min = Math.min(n1,n2);
var max = Math.max(n1,n2);
for (var i = 0; i < items.length; i++) {
// 产生一个随机颜色
var r = Math.floor(Math.random() * 256);
// console.log(r);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
// 修改元素
items[i].style.backgroundColor = "rgba(" + r + "," + g + "," + b + ")";
// 随机高度[10 150]
var h = Math.floor(Math.random() * (max - min + 1) + min);
items[i].style.height = h + "px";
items[i].style.lineHeight = h + "px";
}
}
// 执行
// 传递实参
update(100,500);
// update("abc",500);
</script>
</body>
</html>
如图所示:三次点击后可以随便更换颜色和高度
随机函数封装后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box {
display: flex;
text-align: center;
}
.item {
flex: 1;
}
</style>
</head>
<body>
<div class="box" onclick="update()">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="item">5</div>
<script>
function randomNumber(a = 1, b = 10){
// 这两个函数会做个类型转换, 假如含有其他字符,返回的是NaN
var max = Math.max(a, b);
var min = Math.min(a, b);
if(isNaN(max))throw "参数不规范!";
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 即使只有一个box,也是返回的一个数组集合
var box = document.getElementsByClassName('box')[0];
console.log(box);
// 获取box下面的item, class 是可以通过用元素对象获取,但是id(唯一)只能用document获取
items = box.getElementsByClassName('item');
console.log(items);
// 定义update函数,并且指定形参 n1 和 n2
// 不传参数,默认50-500的范围,不传递,形参是undefined
function update(n1 = 50,n2 = 500) {
console.log(n1,n2);
// 优化处理 防止使用者不传递参数
n1 = n1 == undefined ? 50 : n1;
n2 = n2 == undefined ? 500 : n2;
for (var i = 0; i < items.length; i++) {
// 产生一个随机颜色
var r = randomNumber(0,255);
// console.log(r);
var g = randomNumber(0,255);
var b = randomNumber(0,255);
// 修改元素
items[i].style.backgroundColor = "rgba(" + r + "," + g + "," + b + ")";
// 随机高度[10 150]
var h = randomNumber(n1,n2);
items[i].style.height = h + "px";
items[i].style.lineHeight = h + "px";
}
}
// 执行
// 传递实参
update(100,500);
// update("abc",500);
</script>
</body>
</html>