DOM灯泡效果

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

sky_to_heaven

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

阅读量298

点赞数

分类专栏：个人前端学习总结文章标签： javascript

本文链接：https://blog.csdn.net/sky_to_heaven/article/details/107578850

版权

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

摘要由CSDN通过智能技术生成

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;
            bor