我正在制作一个简单的HTML/CSS/JS程序，其中会出现红绿灯。有两个按钮-"；自动；以及"；手动"；。如果单击"；"自动"；，你应该看到红绿灯自己穿过各种颜色。我通过setInterval实现了这一点。如果单击"；手动"；，你应该能够将控制切换到手动，只需手动更改颜色。我是Javascript的新手，我目前遇到的问题是，当我从"自动"切换到"手动"时，setInterval会继续运行，所以你一按"手动"，红绿灯就会改变颜色，但灯也会继续自己改变。此外，可以点击"；自动；按钮两次，这意味着你按它的次数越多，颜色就开始快速变化，因为setInterval开始被调用多次。
HTML:
<html>
<head>
<title>Traffic Lights</title>
<link rel="retylesheet" type="text/css" href="css/restyle.css"/>
<link rel="stylesheet" type="text/css" href="traffic.css"/>
</head>
<body>
<a class="auto">Auto</a>
<div class="trafficlight">
<div class="circle red" color="red"></div>
<div class="circle orange" color="orange"></div>
<div class="circle green" color="green"></div>
</div>
<a class="manual">Manual</a>
</body>
<script type="text/javascript" src="traffic.js"></script>
</html>
CSS：
* {
box-sizing: border-box;
}
body{
background-color:#eb3456;
min-height:100vh;
margin:0;
display:flex;
align-items:center;
justify-content:center;
}
.circle{
border-radius:50%;
position:relative;
height:80px;
width:80px;
background-color:rgba(0,0,0,0.3);
}
.trafficlight{
display: flex;
align-items:center;
justify-content: space-between;
flex-direction: column;
padding:30px;
width:150px;
height:400px;
background-color: #A9A9A9;
}
.circle.red{
background-color: red;
box-shadow: 0 0 40px 10px red;
}
.circle.orange{
background-color: orange;
box-shadow: 0 0 40px 10px orange;
}
.circle.green{
background-color: green;
box-shadow: 0 0 40px 10px green;
}
a{
background-color: #A9A9A9;
color: white;
padding: 7px 12px;
text-align: center;
text-decoration: none;
margin: 10px;
cursor:pointer;
}
a:hover, a:active{
background-color: #545252;
}
JS:
const circles = document.querySelectorAll(".circle");
const auto = document.querySelector(".auto");
const manual = document.querySelector(".manual");
let active=0;
function changeLight(){
circles[active].className="circle";
active++;
if(active>2){
active=0;
}
const current=circles[active];
current.classList.add(current.getAttribute("color"));
}
auto.onclick = function(){
setInterval(changeLight,1000);
}
manual.onclick = function(){
clearInterval();
changeLight();
}
我试着查了一下，但我找不到任何关于如何停止允许.onclick可以使用两次的信息，或者为什么clearInterval((在按下手动键时不起作用。任何关于如何通过在计算机和用户之间切换控制来让这两个按钮工作的帮助都将是非常棒的——这是我使用JS的第一天。
请检查此脚本。我想这就是你需要的
const circles = document.querySelectorAll(".circle");
const auto = document.querySelector(".auto");
const manual = document.querySelector(".manual");
let active=0;
let isAuto= false;
let autofunction;
function changeLight(){
circles[active].className="circle";
active++;
if(active>2){
active=0;
}
const current=circles[active];
current.classList.add(current.getAttribute("color"));
}
auto.onclick = function(){
isAuto = true
if(autofunction == undefined){
autofunction = setInterval(function(){
if(isAuto){
circles[active].className="circle";
active++;
if(active>2){
active=0;
}
const current=circles[active];
current.classList.add(current.getAttribute("color"));
}
},1000);
}
}
manual.onclick = function(){
/* clearInterval(); */
isAuto = false
changeLight();
}
您可以将setInterval赋值分配给一个变量，这将保存您稍后可以清除的间隔id，例如：
const lightItrvl;
auto.onclick = function(){
lightItrvl = setInterval(changeLight,1000);
}
现在可以使用clearInterval方法清除这个setInterval实例
clearInterval(lightItrvl)
浏览器可以有多个setInterval实例，clearInterval((不是一个合适的语法，因此您需要将intervalId传递给这个方法。您的代码中缺少此项。
请检查SO上已回答的问题https://stackoverflow.com/a/5978560/6351979