帮助重置setTimeOut在javascript中使交通灯

编程入门行业动态更新时间:2024-10-25 20:21:24

本文介绍了帮助重置setTimeOut在javascript中使交通灯的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我想要使交通灯将自动工作，像我一样，但19之后，它会重置和重新启动函数，所以它会看到像永远不会停止的交通灯，将重复 him self

红灯10秒

2秒黄灯

6秒绿灯

1秒黄灯

并重新下载........

ty为所有的帮助！

function changecolor（）{var red = document.querySelector（'＃Red'）var yellow = document.querySelector（'＃Yellow'） var green = document.querySelector（'＃Green'）setTimeout（function（）{red.style.background =red}，5）; // on redsetTimeout（function（）{yellow.style.background =yellow// on yellow + off redred.style.background =＃FF4A4D}，10000）; setTimeout（function（）{yellow.style.background =＃F1FF73// on green + off yellowgreen.style.background =green}，12000）; setTimeout（function（）{yellow.style.background =yellow// on yellow + off greengreen.style.background =＃43B560}，18000）; setTimeout（function（）{red.style.background =red// off yellow + on red yellow.style.background =＃F1FF73}，19000）; setTimeout（changecolor（），19005）; } body {width：100％; height：100％ ; margin：0 auto;} h1 {margin-left：45％;} button {margin-left：49％; margin-top：2％; color：white; border：1px solid blue; background：black;}＃Red {display：block; background：＃FF4A4D; width：15％; height：20vh; border-radius：50％; margin-left：45％; margin-top：1％;}＃Yellow {display：block; ＃F1FF73; width：15％; height：20vh; border-radius：50％; margin-left：45％; margin-top：1％;}＃Green {display：block; background：＃43B560; width：15％ ; height：20vh; border-radius：50％; margin-left：45％; margin-top：1％;}

<！DOCTYPE HTML>< html lang =zh-CN>< head> < meta charset =UTF-8> < script type =text / javascriptsrc =js / script.js>< / script> < link rel =stylesheethref =css / style.css/> < title> Traffic Light< / title>< / head>< body> < h1>交通灯< / h1> < div id =Red>< / div> < div id =Yellow>< / div> < div id =Green>< / div> < button onclick =changecolor（）>点击开始< / button> < / body>< / html>

解决方案

查看此示例。

function changecolor（）{ var red = document.querySelector（'＃Red'） var yellow = document.querySelector（'＃黄色'） var green = document.querySelector（'＃Green'） if（time == 20）{ red.style.background =red yellow.style.background =＃F1FF73; time = 1; } if（time％10 == 0）{ yellow.style.background =yellow red.style.background =＃FF4A4D } if（time％12 == 0）{ green.style.background =green; yellow.style.background =＃F1FF73; } if（time％18 == 0）{ yellow.style.background =yellow//黄色+绿色 green.style.background = ＃43B560} if（time％19 == 0）{ red.style.background =red//黄色+红色 yellow.style.background =＃F1FF73} time + = 1; }

i want to make traffic light that will work automatic , like i did but after 19 its will reset and start again the function so its will see like traffic light that never stop and will repeat him self

10 sec for the red light

2 sec yellow light

6 sec green light

1 sec yellow light

and repat........

ty for all the help !!

body{ width:100%; height:100%; margin: 0 auto; } h1{ margin-left:45%; } button{ margin-left:49%; margin-top:2%; color:white; border: 1px solid blue; background:black; } #Red{ display:block; background:#FF4A4D; width:15%; height:20vh; border-radius:50%; margin-left:45%; margin-top:1%; } #Yellow{ display:block; background:#F1FF73; width:15%; height:20vh; border-radius:50%; margin-left:45%; margin-top:1%; } #Green{ display:block; background:#43B560; width:15%; height:20vh; border-radius:50%; margin-left:45%; margin-top:1%; }

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" href="css/style.css" /> <title>Traffic Light</title> </head> <body> <h1>Traffic Light</h1> <div id="Red"></div> <div id="Yellow"></div> <div id="Green"></div> <button onclick="changecolor()">Click To Start</button> </body> </html>

解决方案

Take a look at this example.

更多推荐

帮助重置setTimeOut在javascript中使交通灯

本文发布于:2023-10-30 11:34:22，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1542734.html