上一篇文章我们讲了如何制作一个通过滑动产色纯色背景的网页，今天，我们对那个网页进行一个补充，（）
因为很多人在设计网页的时候没有颜色的灵感这个时候我们我们就可以考虑通过随机产生一种颜色并且能够实时看到效果的网页
我们来看看上次的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>调色盘</title>
<style>
#colorDisplay {
width: 200px;
height: 200px;
margin: 20px;
}
body {
background-color: #eee;
}
</style>
</head>
<body>
<h2>调色盘</h2>
<p>当前颜色: RGB(<span id="redValue">0</span>, <span id="greenValue">0</span>, <span id="blueValue">0</span>)</p>
<label for="red">红色:</label>
<input type="range" id="red" min="0" max="255" value="0" oninput="updateColor()">
<label for="green">绿色:</label>
<input type="range" id="green" min="0" max="255" value="0" oninput="updateColor()">
<label for="blue">蓝色:</label>
<input type="range" id="blue" min="0" max="255" value="0" oninput="updateColor()">
<div id="colorDisplay" style="background-color: rgb(0, 0, 0);"></div>
<script>
function updateColor() {
var red = document.getElementById('red').value;
var green = document.getElementById('green').value;
var blue = document.getElementById('blue').value;
// 更新颜色值显示
document.getElementById('redValue').textContent = red;
document.getElementById('greenValue').textContent = green;
document.getElementById('blueValue').textContent = blue;
// 使用 rgb() 函数设置背景颜色
var color = 'rgb(' + red + ',' + green + ',' + blue + ')';
document.getElementById('colorDisplay').style.backgroundColor = color;
}
// 初始化颜色显示
updateColor();
</script>
</body>
</html>效果：
但是这里我们发现，只能自己去生成一种颜色，但是很多时候我们设计一个网页没有灵感并不想利用现有的预设颜色这个时候我们就可以通过随机产生颜色的方式。
我们可以考虑加一个随机产生的模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调色盘</title>
<style>
#colorDisplay {
width: 300px;
height: 300px;
margin: 20px;
border: 2px dashed #000;
/* 添加边框 */
}
body {
background-color: #eee;
font-family: Arial, sans-serif;
/* 统一的字体 */
}
</style>
</head>
<body>
<h2>调色盘</h2>
<p>当前颜色: RGB(<span id="redValue">0</span>, <span id="greenValue">0</span>, <span id="blueValue">0</span>)</p>
<label for="red">红色:</label>
<input type="range" id="red" min="0" max="255" value="0" oninput="updateColor()">
<label for="green">绿色:</label>
<input type="range" id="green" min="0" max="255" value="0" oninput="updateColor()">
<label for="blue">蓝色:</label>
<input type="range" id="blue" min="0" max="255" value="0" oninput="updateColor()">
<button onclick="generateRandomColor()">生成随机颜色</button>
<div id="colorDisplay" style="background-color: rgb(0, 0, 0);"></div>
<script>
function updateColor() {
var red = document.getElementById('red').value;
var green = document.getElementById('green').value;
var blue = document.getElementById('blue').value;
// 更新颜色值显示
document.getElementById('redValue').textContent = red;
document.getElementById('greenValue').textContent = green;
document.getElementById('blueValue').textContent = blue;
// 使用 rgb() 函数设置背景颜色
var color = 'rgb(' + red + ',' + green + ',' + blue + ')';
document.getElementById('colorDisplay').style.backgroundColor = color;
// 获取当前颜色并更新边框颜色
var color = 'rgb(' + red + ',' + green + ',' + blue + ')';
updateBorderColor(color);
}
function updateBorderColor(color) {
// 将RGB字符串转换为RGB数组
var rgb = color.match(/\d+/g).map(Number);
// 计算亮度（简单方法：R+G+B然后除以3）
var brightness = (rgb[0] + rgb[1] + rgb[2]) / 3;
// 根据亮度设置边框颜色
var borderColor = brightness > 128 ? '#000' : '#fff'; // 亮度高于128用黑色，否则用白色
document.getElementById('colorDisplay').style.borderColor = borderColor;
}
function generateRandomColor() {
// 生成随机RGB颜色值
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
// 更新页面上的颜色值和显示
document.getElementById('red').value = red;
document.getElementById('green').value = green;
document.getElementById('blue').value = blue;
updateColor(); // 调用updateColor来更新显示
}
// 初始化颜色显示（可选，因为页面加载时已经是初始状态）
// updateColor();
</script>
</body>
</html>这样我们就多了一个功能