JS---设置简易红绿灯

最新推荐文章于 2022-01-28 14:02:46 发布

weixin_34133829

最新推荐文章于 2022-01-28 14:02:46 发布

阅读量158

点赞数

原文链接：http://www.cnblogs.com/Andy-/p/7587562.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    /*设置原始div大小*/
    <style>
        #div1{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body οnlοad="changered()">  <!--οnlοad=""是body里的属性，用于调方法-->
    <div id="div1"></div>   
</body>
<!--setTimeout()表示一次性定时器-->
<script>
    setTimeout(changered,0);    /*设置最开始时间间隔为0*/
    function changered(){
        var div=document.getElementById("div1");
        div.style.backgroundColor="red";
        setTimeout(changeyellow,7000);/*红灯持续亮7秒*/

    }
    function changeyellow(){
        var div=document.getElementById("div1");
        div.style.backgroundColor="yellow";
        setTimeout(changegreen,3000);

    }
    function changegreen(){
        var div=document.getElementById("div1");
        div.style.backgroundColor="green";
        setTimeout(changered,5000);

    }

</script>
</html>