Question

我想创建红绿灯控制器。

<!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秒才能开始红绿灯。如何解决这个问题？我想在页面加载绿灯时切换。

Answer 1

您是否尝试过定时调用myFun？请参阅以下代码底部添加的myFun调用：

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

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

Answer 2

我创建了一个简单的交通灯系统！试试这个。我用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>

使用javascript的红绿灯

2 个答案: