我已经创建了一个按钮。我想点击按钮，然后随机改变背景颜色。在网页上，我需要显示网页当前显示的RGB色码。
请帮我解决这个问题。下面是我到目前为止的代码:
let r=Math.round(Math.floor((Math.random() * 255) + 0));
let g=Math.round(Math.floor((Math.random() * 255) + 0));
let b=Math.round(Math.floor((Math.random() * 255) + 0));
let colourCode = document.querySelector('.colourCode');
let button = document.querySelector('.button');
let code= [r,g,b];
button.addEventListener('click', ()=>{
let colour = document.body.style.backgroundColor = 'rgb(200, 0, 0)';
document.querySelector('.colourCode').innerText= colour;
});body{
margin: 0%;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
gap: 20px;
}
.button button{
height: 3rem;
width: 8rem;
font-size: larger;
cursor: pointer;
}
.colourCode{
font-size: medium;
padding: 0 15px 0 15px;
width: auto;
background-color: antiquewhite;
font-size: 2rem;
font-weight: 600;
text-align: center;
}<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="colourCode"></div>
<div class="button"><button>Click Me</button></div>
<script src="script.js"></script>
</body>将计算r,g和b值的随机值的代码放在点击按钮时调用的函数中
let button = document.querySelector('.button');
button.addEventListener('click', () => {
let r = Math.round(Math.floor((Math.random() * 255) + 0));
let g = Math.round(Math.floor((Math.random() * 255) + 0));
let b = Math.round(Math.floor((Math.random() * 255) + 0));
let colour = document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
document.querySelector('.colourCode').innerText = colour;
});body {
margin: 0%;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
gap: 20px;
}
.button button {
height: 3rem;
width: 8rem;
font-size: larger;
cursor: pointer;
}
.colourCode {
font-size: medium;
padding: 0 15px 0 15px;
width: auto;
background-color: antiquewhite;
font-size: 2rem;
font-weight: 600;
text-align: center;
}<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="colourCode"></div>
<div class="button"><button>Click Me</button></div>
<script src="script.js"></script>
</body>你就快成功了。你只需要使用你的随机数r,g,b的样式和元素文本。
let colourCode = document.querySelector('.colourCode');
let button = document.querySelector('.button');
button.addEventListener('click', ()=>{
let r=Math.round(Math.floor((Math.random() * 255) + 0));
let g=Math.round(Math.floor((Math.random() * 255) + 0));
let b=Math.round(Math.floor((Math.random() * 255) + 0));
let colour = document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
document.querySelector('.colourCode').innerText= colour;
});body{
margin: 0%;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
gap: 20px;
}
.button button{
height: 3rem;
width: 8rem;
font-size: larger;
cursor: pointer;
}
.colourCode{
font-size: medium;
padding: 0 15px 0 15px;
width: auto;
background-color: antiquewhite;
font-size: 2rem;
font-weight: 600;
text-align: center;
}<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="colourCode"></div>
<div class="button"><button>Click Me</button></div>
<script src="script.js"></script>
</body>你也可以使用十六进制的颜色随机化
let colourCode = document.querySelector('.colourCode');
let button = document.querySelector('.button');
button.addEventListener('click', ()=>{
const colour = Math.floor(Math.random()*16777215).toString(16);
document.body.style.backgroundColor = `#${colour}`;
document.querySelector('.colourCode').innerText = `#${colour}`;
});body{
margin: 0%;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
gap: 20px;
}
.button button{
height: 3rem;
width: 8rem;
font-size: larger;
cursor: pointer;
}
.colourCode{
font-size: medium;
padding: 0 15px 0 15px;
width: auto;
background-color: antiquewhite;
font-size: 2rem;
font-weight: 600;
text-align: center;
}<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="colourCode"></div>
<div class="button"><button>Click Me</button></div>
<script src="script.js"></script>
</body>