js 를 이용 하여 간이 신호등 실현
div 용기 에 span 3 개 설정
<body>
<div id="i1">
<span class="light red_light"></span>
<span class="light yellow_light"></span>
<span class="light green_light"></span>
</div>
<style>
.red_light {
width: 200px;
height: 200px;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
background-color: red;
}
.yellow_light {
width: 200px;
height: 200px;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
background-color: yellow;
}
.green_light {
width: 200px;
height: 200px;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
background-color: green;
}
.light {
width: 200px;
height: 200px;
background-color: #777777;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
}
#i1 {
width: 660px;
height: 200px;
margin: 0 auto;
border: black 10px solid;
}
</style>
<script>
function l() {
r_l()//
setTimeout(y_l, 1000);//
setTimeout(r_l, 1000);//
setTimeout(g_l, 2000);//
setTimeout(y_l, 2000);// ，
setTimeout(g_l, 3000);// ，
}
function r_l() {
//
let r = document.getElementsByClassName('red_light')[0];
//toggle ， ， ， ，
r.classList.toggle('light')
}
function g_l() {
//
let r = document.getElementsByClassName('green_light')[0];
r.classList.toggle('light')
}
function y_l() {
//
let r = document.getElementsByClassName('yellow_light')[0];
r.classList.toggle('light')
}
// 10 ， 2 ， 10
l(); //
window.onload = function () {
t1 = setInterval(l, 3000)//
};
// ， ，
</script>
이상 은 js 를 이용 하여 간단 한 신호등 을 실현 하 는 상세 한 내용 입 니 다.js 가 신호등 을 실현 하 는 데 관 한 자 료 는 우리 의 다른 관련 글 을 주목 하 세 요!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
