文章地址 https://www.cnblogs.com/sandraryan/
写两个button和一个div，点击按钮分别改变背景色和前景色（字体颜色）。产生的是一个随机颜色。
<!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>Document</title>
<style>
body {
text-align: center;
}
#wrap {
width: 200px;height: 200px;border: 1px solid black;text-align: center;
margin: 10px auto;font-size: 30px;
}
button {
width: 150px;height: 40px;color: black;text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<button id="btn1">change bgcolor</button><br>
<button id="btn2">change color</button>
<div id="wrap">
test text
</div> <script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var wrap = document.getElementById("wrap");
// 获取元素 function getColor(){
// 封装随机生成颜色的函数作为返回值
return Math.round(Math.random()*255);
} function giveColor(){
var red = getColor();
var green = getColor();
var blue = getColor();
// 获取三个rgb的值
var color= "rgb(" + red + "," + green + "," + blue + ")";
// 吧rhb值拼接在一起给变量color
return color;
// 返回color
} btn1.onclick = function(){
wrap.style.backgroundColor = giveColor();
// btn1注册点击时间，改变wrap的背景色
} btn2.onclick = function(){
wrap.style.color = giveColor();
// btn1注册点击时间，改变wrap的字体颜色
} </script>
</body>
</html>