文章/答案/技术大牛

发布

问使用javascript的红绿灯
EN

Stack Overflow用户

提问于 2017-03-04 20:39:24

回答 2查看 5.9K关注 0票数 1

我想创建红绿灯控制器。

<!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代码：

#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;
}

和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);

    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);

但问题是，当页面加载时，它必须等待13秒才能开始流量，light.How可以解决这个问题吗？我想当页面加载绿灯已经切换。

javascript

html

css

回答 2

Stack Overflow用户

发布于 2017-03-04 20:46:44

您是否尝试过在设置计时器后立即调用myFun？请参见添加到以下代码底部的myFun调用：

var timer = setInterval(function () {
    /* body... */
    myFun()
},13000);

myFun();//Call 'myFun' straight away...

票数 2

Stack Overflow用户

发布于 2021-01-30 02:50:36

我创建了一个简单的红绿灯系统！试试这个吧。我使用jquery来简化属性选择。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Traffic Lights</title>
</head>

<body>
    <p>Demonstrate traffic lights system</p>


    <div id="div1" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
    <div id="div2" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
    <div id="div3" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div>

</body>
<script>

    $(document).ready(function () {
        var state = 0;
        setInterval(function () {
            // state 0 > STOP
            // state 1 > READY 
            // state default > GO 
            switch (state) {
                case 0:
                    state = 1;
                    $('#div3').css({ 'background-color': 'white' });
                    $('#div1').css({ 'background-color': 'red' });
                    break;
                case 1:
                    state = 3
                    $('#div1').css({ 'background-color': 'white' });
                    $('#div2').css({ 'background-color': 'yellow' });
                    break;
                default:
                    state = 0;
                    $('#div2').css({ 'background-color': 'white' });
                    $('#div3').css({ 'background-color': 'green' });
            }

        }, 2000);
    });

   

</script>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42596128

复制

相似问题

问使用javascript的红绿灯
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript的红绿灯EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript的红绿灯
EN