交通灯课程 - A452 [英] Traffic Light Coursework - A452
问题描述
第3部分
我困惑了抓住html和js的基本概念，以便使用一个数组和一个按钮来创建一个交通灯。
到目前为止，我成功地使css和所有资产显示为如此的形状和颜色。
我想知道什么会帮助修复这个代码，因为我不知道什么问题。
我研究的其他网站给了我一些完全不同的公共和东西。不知道。
HTML：
<！DOCTYPE HTML>
< html>
< head>
< title>交通灯脚本< / title> <！ - 上述标签的名称 - >
< link href =TrafficCascade.css =stylesheet>
< / head>
< body>
< h1>交通灯< / h1>< / - >
< table> <！ - - >
< tr>
< td>
< button onClick =functionary（）> Switch< / button>
< div id =redL>< / div>
< div id =yellowL>< / div>
< div id =greenL>< / div>
< / td>
< / tr>
< / table>
< script src =Trafficvarscript.js>< / script>
< / body>
< / html>
Css：
code> #redL {
height：50px;
width：50px;
margin：1px auto;
background-color：＃7A0000;
border-radius：50px;
border：solid 1px black;
padding：1px;
}
#yellowL {
height：50px;
width：50px;
margin：1px auto;
background-color：＃7A5C00;
border-radius：50px;
border：solid 1px black;
padding：1px;
}
#greenL {
height：50px;
width：50px;
margin：1px auto;
background-color：＃008000;
border-radius：50px;
border：solid 1px black;
padding：1px;
}
table {/ *不需要破折号* /
height：180px;
width：80px;
background-color：＃000000;
border：1px＃000000;
text-align：center;
margin-left：50％; / *让margin margin 50％* /
padding：1px;
}
h1 {
text-align：center;
padding：1px;
}
Javascript：
var time = 0;
function functionary（）{
time ++;
}
{var red = document.getElementById（'redL'）
var yellow = document.getElementById（'yellowL'）
var green = document.getElementById（'greenL' ）
var Colors = [＃FF0000，＃FFB300，＃05FF0D，＃7A0000，＃7A5C00，＃008000];
}
if（time == 1）{
red.style.background = Colors [1];
yellow.style.background = Colors [4];
green.style.background = Colors [6];
}
else if（time == 2）{
red.style.background = Colors [4];
yellow.style.background = Colors [2];
green.style.background = Colors [6];
}
else if（time == 3）{
red.style.background = Colors [4];
yellow.style.background = Colors [5];
green.style.background = Colors [3];
}
else if（time == 4）{
var time = 0;
};
第4部分
我必须使一个交通灯，运行没有任何输入所以自动，这带来了我在javascript中的onload函数运行脚本时加载页面。我想知道如何正确实现这在我目前的代码。我也希望交通灯循环通过具有时间延迟的颜色，这可以通过设置间隔。我努力正确地添加这两个功能，让它的工作。我重用了css，只改变了js和html。
一切都按顺序显示，只在网页加载时调用一次。您需要在每次按下按钮时执行检查，因此将它们添加到 functionary 方法中，如下所示：
var time = 0;
function functionary（）{
time ++;
if（time == 4）{
time = 1;
}
updateLights（）;
}
var red = document.getElementById（'redL'）
var yellow = document.getElementById（'yellowL'）
var green = document.getElementById 'greenL'）
var Colors = [＃FF0000，＃FFB300，＃05FF0D，＃7A0000，＃7A5C00，＃008000];
function updateLights（）{
if（time == 1）{
red.style.background = Colors [0];
yellow.style.background = Colors [3];
green.style.background = Colors [5];
}
else if（time == 2）{
red.style.background = Colors [3];
yellow.style.background = Colors [1];
green.style.background = Colors [5];
}
else if（time == 3）{
red.style.background = Colors [3];
yellow.style.background = Colors [4];
green.style.background = Colors [2];
}
}
注意我修复了这个新的 updateLights 方法。
Part 3 I've been confused grasping the basic concepts of html and js inorder to make a traffic light with a array and a button. So far I successfully made the css and all assets appear so the shapes and colours. I was wondering what would help fix this code as im not sure whats the problem. Other sites i researched gave me something completely different like public and stuff. No idea. I use notepad and will have to put this in my coursework.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title> Traffic Light Script </title> <!-- Name for the above tab -->
<link href="TrafficCascade.css" rel="stylesheet">
</head>
<body>
<h1> Traffic Light </h1><!-- -->
<table> <!-- -->
<tr>
<td>
<button onClick="functionary()">Switch</button>
<div id="redL"></div>
<div id="yellowL"></div>
<div id="greenL"></div>
</td>
</tr>
</table>
<script src="Trafficvarscript.js"></script>
</body>
</html>
Css:
#redL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #7A0000;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
#yellowL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #7A5C00;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
#greenL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #008000;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
table{ /* Doesn't need dashes */
height: 180px;
width: 80px;
background-color: #000000;
border: 1px #000000;
text-align: center;
margin-left: 50%; /* makes margin right 50% */
padding: 1px;
}
h1{
text-align: center;
padding: 1px;
}
Javascript:
var time = 0;
function functionary(){
time++;
}
{var red = document.getElementById('redL')
var yellow = document.getElementById('yellowL')
var green = document.getElementById('greenL')
var Colours = ["#FF0000","#FFB300","#05FF0D","#7A0000","#7A5C00","#008000"];
}
if(time == 1){
red.style.background = Colours[1];
yellow.style.background = Colours[4];
green.style.background = Colours[6];
}
else if(time == 2){
red.style.background = Colours[4];
yellow.style.background = Colours[2];
green.style.background = Colours[6];
}
else if(time == 3){
red.style.background = Colours[4];
yellow.style.background = Colours[5];
green.style.background = Colours[3];
}
else if(time == 4){
var time = 0;
};
Part 4
So for my coursework I have to make a traffic light that runs without any input so automatically, which brought me to the onload function in javascript which runs scripts when a page is loaded. I was wondering how to correctly implement this in my current code. I would also like the traffic light to cycle through colours with a time delay, which can be done through set interval. I was struggling to correctly add both of these functions to let it work. I reused the css and only changed the js and html.
Everything appears in order, but your JavaScript conditions that change the colors are only being called once on page load. You need to perform the checks every time the button is pressed, so add them to your functionary method, like so:
var time = 0;
function functionary(){
time++;
if(time == 4){
time = 1;
}
updateLights();
}
var red = document.getElementById('redL')
var yellow = document.getElementById('yellowL')
var green = document.getElementById('greenL')
var Colours = ["#FF0000","#FFB300","#05FF0D","#7A0000","#7A5C00","#008000"];
function updateLights() {
if(time == 1){
red.style.background = Colours[0];
yellow.style.background = Colours[3];
green.style.background = Colours[5];
}
else if(time == 2){
red.style.background = Colours[3];
yellow.style.background = Colours[1];
green.style.background = Colours[5];
}
else if(time == 3){
red.style.background = Colours[3];
yellow.style.background = Colours[4];
green.style.background = Colours[2];
}
}
Note I fixed a few other issues in this new updateLights method.
这篇关于交通灯课程 - A452的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
