• 热点推荐:
 首页 / web案例 / 正文
javascript实现网页开关灯的效果案例-js技巧

Time:2021年08月18日 Read:247 评论:0 作者:小天老师

在网页中通过点击实现开灯和关灯的效果,需要获取body,点击按钮事件,给开灯和关灯设置一个变量flag,当白天时,flag='daytime',当晚上时 flag='night'; 通过if...else来执行开关灯效果。

原生js代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页开关灯效果-传授PC网</title>
    <style>
        button {
            color: #333;
            border: 1px solid #000;
            outline: none;
        }
    </style>
</head>

<body>
    <button>关灯</button>

    <script>
        var btn = document.querySelector('button');
        var bodyEle = document.body;
        var flag = 'daytime';
        btn.onclick = function() {
            if (flag == 'daytime') {
                bodyEle.style.backgroundColor = '#000';
                this.style.backgroundColor = '#000';
                this.style.color = '#fff';
                this.innerText = '开灯';
                this.style.border = '1px solid #fff';
                flag = 'night';
            } else {
                bodyEle.style.backgroundColor = '#fff';
                this.style.backgroundColor = '#fff';
                this.style.color = '#000';
                this.innerText = '关灯';
                flag = 'daytime';
            }
        }
    </script>

</body>

</html>
标签: javascript基础 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图