使用JavaScript做灯泡开关的效果

最新推荐文章于 2020-10-05 14:31:17 发布

你看我是谁

最新推荐文章于 2020-10-05 14:31:17 发布

阅读量421

点赞数

本文链接：https://blog.youkuaiyun.com/zyk262511/article/details/102538312

版权

本文介绍如何利用JavaScript创建一个模拟灯泡开关效果的互动动画，通过改变元素的样式属性，实现灯泡的亮灭状态切换。

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

使用JavaScript做灯泡开关的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灯</title>
    <style>
        #a1{
            float: left;
        }

        #a2{
            float: left;
        }

        #showTime{
            overflow: auto;
        }
    </style>
</head>
<body>

<div id="a1">
       <div><img src="dark.png" style="width: 450px;height: 550px" id="light"></div>
</div>

    <div id="a2">
       <div style=" margin-top: 400px;margin-left: 50px">
           <img src="off.png" style="width: 100px;height: 150px" id="switch" onclick="oc()">
       </div>
    </div>

    <div id="a" style="margin-left: 200px">
        &

最低0.47元/天解锁文章