이 글에서는 신호등 효과를 구현하기 위해 JS에서 Promise를 사용하는 방법을 소개합니다. Promise 사용법을 모르는 친구들은 이 글을 참고하세요
요구 사항 E 빨간색과 녹색 조명 색상 점프를 구현하려면 Promise를 사용하세요. 3초 동안 녹색 조명이 켜진 후 4초 동안 노란색 조명이 실행됩니다.
빈 클래스를 정의한 후 해당 클래스 이름을 js에서 조작합니다. 효과.<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul>
원리:
ul { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%,-50%); } /*画3个圆代表红绿灯*/ ul >li { width: 40px; height: 40px; border-radius:50%; opacity: 0.2; display: inline-block; } /*执行时改变透明度*/ ul.red >#red, ul.green >#green, ul.yellow >#yellow{ opacity: 1.0; } /*红绿灯的三个颜色*/ #red {background: red;} #yellow {background: yellow;} #green {background: green;}
function timeout(timer){ return function(){ return new Promise(function(resolve,reject){ setTimeout(resolve,timer) }) } } var green = timeout(3000); var yellow = timeout(4000); var red = timeout(5000); var traffic = document.getElementById("traffic"); (function restart(){ 'use strict' //严格模式 console.log("绿灯"+new Date().getSeconds()) //绿灯执行三秒 traffic.className = 'green'; green() .then(function(){ console.log("黄灯"+new Date().getSeconds()) //黄灯执行四秒 traffic.className = 'yellow'; return yellow(); }) .then(function(){ console.log("红灯"+new Date().getSeconds()) //红灯执行五秒 traffic.className = 'red'; return red(); }).then(function(){ restart() }) })();
위는 에디터가 소개한 신호등 구현을 위해 JS에서 Promise를 사용한 예제 코드(데모)입니다. 많은 분들께 도움이 되었으면 좋겠습니다! !
관련 권장 사항: jQuery에서 Promise를 사용하는 구체적인 방법
완전한 Promise를 구현하는 방법Promise 객체의 간단한 사용법에 대하여
위 내용은 JS에서 Promise를 사용하여 신호등 예제 코드 구현(데모)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!