当前位置：网站首页 > 创业 > 正文

如何用html+css+javascript写一个简易红绿灯

0 张子豪 张子豪 2025-10-11 14:04 1

用html+css+javascript写一个简略单纯红绿灯

东西/原料

  • 利用windows自带记事本

方式/步调

  1. 1

    新建一个.html文件，用记事本打开。

  2. 2

    在记事本中复制添加以下内容并保留：

    <html>

       <head>

    <title>红绿灯</title>

    <style>

    #div1 div{

    width:200px;

    height:200px;

    background:pink;

    border:2px solid blue;

    float:left;

    margin:10px;

    border-radius:100%;

    }

    #div1{

       width:680px;

       height:220px;

       background:pink;

       border:2px solid black;

       margin-left:25%;

    }

    </style>

    <script>

       window.onload = function(){

    var divs = document.getElementById('div1').getElementsByTagName('div');

    var index = 0;

    var color = ['red','yellow','green'];

    setInterval(f1,1000);

    f1();

    function f1(){

       for(var i = 0; i < 3; i++){

           divs[i].style.background = 'gray';

       }

       divs[index].style.background = color[index];

       index == 2 ? index = 0 : index++;

    }

       }

    </script>

       </head>

       <body>

    <h1 style="text-align:center;margin-top:10%;">红绿灯</h1>

    <div id="div1">

    <div></div>

    <div></div>

    <div></div>

    </div>

       </body>

    </html>

  3. 3

    用浏览器打开此文件

  4. 4

    结果截图：

来源：百闻（微信/QQ号：9397569），转载请保留出处和链接！


本文链接：https://www.ibaiwen.com/web/224720.html

张子豪

张子豪

TA很懒，啥都没写...

猜你喜欢

热门文章
热评文章
最新评论
    最近访客
    站点信息
    • 文章总数:200248
    • 页面总数:9
    • 分类总数:1
    • 标签总数:0
    • 评论总数:0
    • 浏览总数:497

    免责条款

    商务合作

    关于我们

    百闻创业

    百闻创业，是一个帮助广大创业者解决创业类的专业网站，提供创业项目、创业点子、招商加盟、创业资料、创业故事、创业计划书、小本创业、开店项目和创业指导培训的创业平台。

    @百闻娱乐 本站部分内容转自互联网，若有侵权等问题请及时与本站联系，我们将在第一时间删除处理。 | 粤ICP备2024343649号 | （地图）