javascript - 帮助重置 setTimeOut 以在 javascript 中制作红绿灯-6ren

javascript - 帮助重置 setTimeOut 以在 javascript 中制作红绿灯

转载作者：太空宇宙更新时间：2023-11-04 11:36:02

25

4

我想让交通灯自动工作，就像我做的那样，但在 19 岁之后它会重置并重新启动该功能所以它会像交通灯一样永不停止并且会重复他自己

1. 红灯10秒
1. 2 秒黄灯
1. 6 秒绿灯
1. 1秒黄灯
1. 并重复…………

谢谢大家的帮助!!

 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 red

setTimeout(function(){ yellow.style.background= "yellow"  //on yellow + off red
red.style.background= "#FF4A4D" 
},10000);	

setTimeout(function(){ yellow.style.background= "#F1FF73"  //on green + off yellow
green.style.background= "green"
},12000);	

setTimeout(function(){ yellow.style.background= "yellow" //on yellow + off green
green.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;
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>

最佳答案

看看这个example .

function changecolor(){
var red = document.querySelector('#Red')    
var yellow = document.querySelector('#Yellow')  
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" //on yellow + off green
     green.style.background= "#43B560"
}   

 if(time % 19 == 0) {
      red.style.background= "red" //off yellow + on red 
      yellow.style.background= "#F1FF73"
}   

 time+=1;

}

关于javascript - 帮助重置 setTimeOut 以在 javascript 中制作红绿灯，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31747318/

25

4

0

文章推荐： C++从ifstream中拆分字符串并将它们放在单独的数组中

文章推荐： c++ - g++ 未定义对 'Curve:Curve()' 的引用

文章推荐： c++ - 如何对作为参数传递的数组进行排序？

文章推荐： css - 聊天 HTML 页面建议

java - 如何在android中使用工具栏创 build 置
我有一个“设置首选项”屏幕。它有一个 ListPreference 和一个 CheckBoxPreference。当我选择 ListPreference 的一项时，我想更改应用程序的日期格式。另外，通
c++ - Qt如何创 build 置/配置窗口
我试图找到创 build 置/配置窗口的示例。单击菜单项中的“选项”操作可启动设置窗口。我想弄清楚如何从主窗口打开第二个窗口。以及新窗口如何将设置信息返回主窗口。尝试使用 QDialog 或一些继承的
c++ - 为 Qt 项目创 build 置
我在 Lnux 上有 Qt 应用程序。我想为此创建一个可执行文件/设置以便在 Windows 上分发它并且不需要安装 Qt。我通过包含所有 dll 为此创建了可执行文件但要运行它，用户需要进入文件夹。
Javascript - 创 build 置 div 宽度的动态类
我正在尝试创建一个有点动态的 html 类，它根据类末尾包含的数字设置宽度 %。注意:类名将始终以“gallery-item-”开头示例:div.gallery-item-20 = 20% 宽度我
android - 如何创 build 置 Activity 以从底部出现一半的屏幕？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 6 年前。 Improve this qu
android - 如何在 Android 应用程序中创 build 置
在我的应用程序中，我想记住一些变量，例如，如果用户登录过一次，那么他们将在下次重新打开应用程序时登录，或者如果他们决定禁用某些提醒，应用程序可以检查该变量是否是错误的，将不再显示该提醒。理想情况下，这
java - 如何为 Java 应用程序创 build 置？
我在 Netbeans 中开发了一个应用程序，它连接到远程计算机的消息队列并发送消息。该应用程序还有其他功能。项目完成后，我清理并构建应用程序，然后 Netbeans 创建一个 jar 文件。但我的
.net - 为 Outlook 2010 加载项创 build 置
我创建了一个 Outlook 加载项，需要创建一个设置以使其可分发(我是新手，所以请原谅新手评论) Outlook -2010 Vs -2010 .Net 4.0 我读了一些地方，最简单的方法就是发
java - 在 java swing 应用程序中创 build 置
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: How to make installer pack of Java swing Application Proje
c# - 在 WPF 应用程序中创 build 置 View
这个问题肯定已经被很多人解决过很多次了，但是经过几个小时的研究，我仍然没有找到我要找的东西。我有一个 ExportSettings.settings 文件，其中包含一堆设置( bool 值、字符串、
linux - 为 Linux C 项目创 build 置
我想为我的项目创建一个安装程序，以便它可以安装在任何电脑上而无需安装头文件。我怎样才能做到这一点？最佳答案一般有两种分发程序的方法: 源代码分发(要构建的源代码)。最常见的方法是使用 GNU au
java - 如何为 Android 动态壁纸创 build 置 Activity
如何在这样的动态壁纸中创 build 置 Activity ？ Example Picture 我只用一个简单的文本构建了设置 Activity ，但遇到了一些问题。第一个问题是我不能为此 Activ
python - 如何为具有依赖项的 Python 项目创 build 置/安装程序？
我用 GUI 创建了一个简单的软件。它有几个源文件。我可以在我的编辑器中运行该项目。我认为它已经为 1.0 版本做好了准备。但我不知道如何为我的软件创 build 置/安装程序。源代码是python
android - 在 Android P 上创 build 置 Activity
我的 SettingsActivity当前扩展了 Android Studio 生成的类，AppCompatPreferenceActivity扩展 PreferenceActivity . Acti
c# - 创 build 置 (MSI) 以注册(regasm)程序集
我正在使用 .NET 为 IE 开发工具栏。目前，我使用 gacutil 插入我的 .NET 程序集，并使用 regasm 注册我的 COM 程序集。我想为项目创建一个设置 (MSI)，但我似乎无法
android - 创 build 置 Activity 时出现 boolean 参数问题
在为设置页面创建 Activity 后，我注意到 if (mCurrentValue !== value) 中的 mCurrentValue !== value 返回警告: Identity equa
c# - 在 visual studio 10 中创 build 置
我在 Visual Studio 10 中创建了一个项目，该项目使用 Mysql 数据库和 Crystalreports 以及它。但是我不知道如何进行自动安装 Mysql 和 Crystalrepo
c# - 在 C# 项目中使用 sqlite 数据库并创 build 置
我正在尝试在我的 C# 项目中使用 Sqlite 数据库，并且我在 IDE 中做得很好。我的问题是当我为我的项目制作安装包并安装它时，程序无法访问 sqlite 数据库。我也知道这是因为用户没有访问文
c# - 如何使用 Web 平台安装程序为 Web 应用程序创 build 置
我有一个大型 Web 应用程序(带有 11 子系统的 ErP)，我想使用 Microsoft WebPI 为它创建一个设置。目前，我们每周向客户发送一次应用程序(用于每周更新)。我们在此应用程序中
visual-studio - 在 visual studio 2008 中为项目解决方案创 build 置
所以我对工资单申请的最终查询是 - 如何为薪资申请创 build 置？我需要知道的一切- 如何将设置项目添加到我现有的解决方案如何将解决方案中的文件添加到安装项目中，以及添加哪些文件添加和在什么文

首页

博学

6Ren·AI

商城

javascript - 帮助重置 setTimeOut 以在 javascript 中制作红绿灯