javascript案例6——开关灯、背景变化

最新推荐文章于 2023-05-15 19:36:36 发布

耶啵奶膘

最新推荐文章于 2023-05-15 19:36:36 发布

阅读量664

点赞数

分类专栏： javascript 文章标签： javascript html css3

本文链接：https://blog.csdn.net/xulihua_75/article/details/124638012

版权

javascript 专栏收录该内容

55 篇文章 6 订阅

订阅专栏

一、案例描述

点击小人物，背景从白天切换到黑夜，并且小人物图片会切换到黑夜模式，再点击又会恢复成白天。逻辑和密码显示隐藏是相同的。

二、案例效果演示

请添加图片描述

三、案例局部代码

css代码

<style>
   img {
       position: absolute;
       right: 0;
       top: 0;
   }
</style>

html代码

<img src="./img/day.png" />

js代码

<script>
    window.onload = function() {
        // 获取图片元素
        var imgbtn = document.querySelector('img');
        var flag = 0; //默认0白天 1黑夜
        imgbtn.onclick = function() {
            if (flag == 0) {
                document.body.style.backgroundColor = '#000';
                this.src = './img/dark.png';
                flag = 1;
            } else {
                document.body.style.backgroundColor = '#fff';
                this.src = './img/day.png';
                flag = 0;
            }
        }
    }
</script>

四、案例整体代码

<!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>开关灯</title>
    <style>
        img {
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload = function() {
            // 获取图片元素
            var imgbtn = document.querySelector('img');
            var flag = 0; //默认0白天 1黑夜
            imgbtn.onclick = function() {
                if (flag == 0) {
                    document.body.style.backgroundColor = '#000';
                    this.src = './img/dark.png';
                    flag = 1;
                } else {
                    document.body.style.backgroundColor = '#fff';
                    this.src = './img/day.png';
                    flag = 0;
                }
            }
        }
    </script>
</head>

<body>
    <img src="./img/day.png" />
</body>

</html>

五、总结

核心思想：创建一个新变量，通过判断和更改此变量来实现此效果。

耶啵奶膘

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript案例6——开关灯、背景变化

一、案例描述点击小人物，背景从白天切换到黑夜，并且小人物图片会切换到黑夜模式，再点击又会恢复成白天。逻辑和密码显示隐藏是相同的。二、案例效果演示三、案例局部代码css代码<style> img { position: absolute; right: 0; top: 0; }</style>html代码<img src="./img/day.png" />js代码<script>
复制链接

扫一扫