DOM灯泡效果

最新推荐文章于 2023-04-11 17:33:03 发布

原创最新推荐文章于 2023-04-11 17:33:03 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

个人前端学习总结专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了一个DOM小练习，通过JavaScript实现灯泡效果。内容包括创建一个包含五个li元素的ul列表，模拟灯泡并排显示，初始默认选中一个灯泡为亮色，其余为黑色。当点击某个灯泡时，该灯泡变亮，其他灯泡变暗。通过设置CSS样式，如border-radius、背景色和边框颜色，来达到视觉上的灯泡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM小练习-灯泡效果

要求：五个灯泡，默认选择一个：当点击其中一个变亮，其他黑色；

分析：五个灯泡可以用ul标签包裹5个li标签，左浮动并排显示，给li标签加上等长的宽高后，设置border-radius: 50%;使li盒子变成圆形，设置背景色灰色#aaaaaa 边框：border:5px solid skyblue; 设置选择状态：.on{ background-color: gold;border: 6px solid lawngreen; }

具体看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯泡效果</title>
    <style>
        ul{
            list-style: none;
        }
        ul li{
            line-height: 50px;
            text-align: center;
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #aaaaaa;
            border: 6px solid skyblue;
        }
        .on{
            background-color: gold;
            border: 6px solid lawngreen;

        }
        li:hover{cursor: pointer;}//设置鼠标悬停时显示小手
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    <script>
        let lis = document.getElementsByTagName("li");//利用伪数组存放li标签
        for(let i=0;i<lis.length;i++){//给每一个标签绑定点击事件
            lis[i].onclick = function(){//点击事件执行时，先让所有li的class属性为空，此时li的默认效果，即所有灯泡关闭
                for(let j=0;j<lis.length;j++){
                lis[j].className="";
                } 
                this.className="on"//单独改变前的li标签的className为"on",即此灯泡打开
            } 
        }
    </script>
</body>
</html>