HTML网页写出红绿灯

最新推荐文章于 2023-12-14 11:24:07 发布

终泪

最新推荐文章于 2023-12-14 11:24:07 发布

阅读量1.9k

点赞数 9

分类专栏： HTML 文章标签： html vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_67855345/article/details/129284612

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单的了解HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

开始写代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>红绿灯</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            ul{
                width: 400px;
                height: 300px;
                margin: 60px auto;
            }
            li{
                list-style: none;
                width: 80px;
                height: 80px;
                background-color: gray;
                float: left;
                border-radius: 50%;
                margin-left: 10px;
            }
            #time{
                width: 80px;
                height: 80px;
                background-color: black;
                float: left;
                margin-left: 10px;
                color: red;
                font-size: 60px;
                text-align: center;
                font-family: "franklin gothic heavy";
            }
        </style>
    </head>
    <body>
        <ul>
            <li id="red"></li>
            <li id="yellow"></li>
            <li id="green"></li>
            <div id="time"></div>
        </ul>
        <script>
            var now = 10
            var flag = 1;//1表示红灯,2表示绿灯,3表示的黄灯
            //实现红绿灯的功能
            function fun(){
                document.getElementById("time").innerHTML =now--
                //document.getElementById("red").style.backgroundColor="red"
                //控制红灯
                if(flag==1){
                    if(now>=1){
                        document.getElementById("red").style.backgroundColor="red"
                    }else{
                        now = 3
                        flag=3
                        document.getElementById("red").style.backgroundColor="gray"
                    }
                }
                //控制黄灯
                if(flag==3){
                    if(now>=1){
                        document.getElementById("yellow").style.backgroundColor="orange"
                    }else{
                        now = 10
                        flag=2
                        document.getElementById("yellow").style.backgroundColor="gray"
                    }
                }
                //控制绿灯
                if(flag==2){
                    if(now>=1){
                        document.getElementById("green").style.backgroundColor="green"
                    }else{
                        now = 10
                        flag=1
                        document.getElementById("green").style.backgroundColor="gray"
                    }
                }
            }
            //调用
            setInterval("fun()",1000)
        </script>
    </body>
</html>