文章地址 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>