신호등이 나타나는 간단한 HTML / CSS / JS 프로그램을 만들고 있습니다. "자동"과 "수동"의 두 가지 버튼이 있습니다. "자동"을 클릭하면 신호등이 저절로 색상을 통과하는 것을 볼 수 있습니다. 나는 이것을 setInterval로 달성했습니다. "수동"을 클릭하면 제어를 수동으로 전환하고 수동으로 만 색상을 변경할 수 있습니다. 저는 Javascript를 처음 사용했으며 현재 문제는 자동에서 수동으로 이동할 때 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();
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다