本文介绍了使用javascript的交通灯的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建交通灯控制器。 <！DOCTYPE html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title> isiqfor< / title>
< link rel =stylesheethref =style.css>
< / head>
< body onload =timer;>
< div id =isiqfor>
< div class =green>< / div>
< div class =yellow>< / div>
< div class =red>< / div>
< / div>
< script src =script.js>< / script>
< / body>
< / html>
CSS code：
#isiqfor {
border：10px纯黑色;
padding：10px 3px;
width：50px;
}
＃isiqfor> div {
width：50px;
height：50px;
border-radius：50％;
不透明度：.3;
}
.green {
background-color：green;
}
。黄色{
background-color：yellow;
}
.red {
background-color：red;
}
和JS文件：
function myFun（）{
// body ...
var green = document.getElementsByClassName（green）[0];
var red = document.getElementsByClassName（red）[0];
var yellow = document.getElementsByClassName（yellow）[0];
green.style.opacity = 1;
setTimeout（function（）{
/ * body ... * /
green.style.opacity = .3;
red.style.opacity = .3;
yellow.style.opacity = 1;
}，5000）;
$ b $ setTimeout（function（）{
/ * body ... * /
green.style.opacity = .3;
red.style.opacity = 1 ;
yellow.style.opacity = .3;
}，7000）;
$ b setTimeout（function（）{
/ * body ... * /
green.style.opacity = 1;
red.style.opacity = .3 ;
yellow.style.opacity = .3;
}，12000）;
$ b var timer = setInterval（function（）{
/ * body ... * /
myFun（）
}，13000）;
但问题是当页面加载时，它必须等待13秒开始交通灯。如何解决这个问题？我希望当页面加载绿灯已经切换。
你有没有试过调用 myFun 在你的计时器被设置后马上消失？查看对 myFun 添加到以下代码底部的调用： var timer = setInterval（function（）{
/ * body ... * /
myFun（）
}，13000）;
myFun（）; //立即呼叫'myFun'...
I want create traffic light controller.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>isiqfor</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="timer;">
<div id="isiqfor">
<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS code:
#isiqfor{
border: 10px solid black;
padding: 10px 3px;
width: 50px;
}
#isiqfor>div{
width:50px;
height: 50px;
border-radius: 50%;
opacity: .3;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
And JS file:
function myFun () {
// body...
var green=document.getElementsByClassName("green")[0];
var red=document.getElementsByClassName("red")[0];
var yellow=document.getElementsByClassName("yellow")[0];
green.style.opacity=1;
setTimeout(function () {
/* body... */
green.style.opacity=.3;
red.style.opacity=.3;
yellow.style.opacity=1;
},5000);
setTimeout(function () {
/* body... */
green.style.opacity=.3;
red.style.opacity=1;
yellow.style.opacity=.3;
},7000);
setTimeout(function () {
/* body... */
green.style.opacity=1;
red.style.opacity=.3;
yellow.style.opacity=.3;
},12000);
}
var timer = setInterval(function () {
/* body... */
myFun()
},13000);
But problem is when page loads it must wait 13 second for beginning traffic light.How can solve this problem? I want when page loads green light has switched.
解决方案
Have you tried calling myFun straight away after your timer is set? See the call to myFun added to the bottom of the following code:
var timer = setInterval(function () {
/* body... */
myFun()
},13000);
myFun();//Call 'myFun' straight away...
这篇关于使用javascript的交通灯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！