按下启动按钮时，使用HTML，CSS和JavaScript不会更改浏览器窗口的背景颜色
当我按下启动按钮时，浏览器窗口的背景颜色应更改。首先，它应该变成红色30秒，然后将其变成黄色5秒钟，然后再呈绿色30秒。它至少发生一次。 //以下是html file：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Traffic Light</h1>
<div>
<button id="btn1">Start</button>
</div>
</body>
<script src="TrafficLightJS.js"></script>
</body>
</html>
//以下是javascript文件：
const colors=["red","yellow","green"];
const btn=document.getElementById("btn");
//const color=document.querySelector(".color");
btn.addEventListener("click",function()){
setInterval(function()) {
document.body.style.background=colors[0];
},30000);
setInterval(function()) {
document.body.style.background=colors[1];
},5000);
setInterval((function()) {
document.body.style.background=colors[2];
},30000);
}
// CSS文件如下：
.red
{
background-color:red;
}
.yellow
{
background-color:yellow;
}
.green
{
background-color:green;
}
When I press start button the background color of browser window should change . First it should turn to red for 30 seconds then to yellow for 5 seconds and then to green for 30 seconds.It should happen atleast once.
//Below is HTML file :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Traffic Light</h1>
<div>
<button id="btn1">Start</button>
</div>
</body>
<script src="TrafficLightJS.js"></script>
</body>
</html>
//Below is Javascript file:
const colors=["red","yellow","green"];
const btn=document.getElementById("btn");
//const color=document.querySelector(".color");
btn.addEventListener("click",function()){
setInterval(function()) {
document.body.style.background=colors[0];
},30000);
setInterval(function()) {
document.body.style.background=colors[1];
},5000);
setInterval((function()) {
document.body.style.background=colors[2];
},30000);
}
//CSS File is below:
.red
{
background-color:red;
}
.yellow
{
background-color:yellow;
}
.green
{
background-color:green;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论