JavaScript-- 网页中常见动态效果实现

最新推荐文章于 2024-02-06 16:28:29 发布

zn0128

最新推荐文章于 2024-02-06 16:28:29 发布

阅读量3k

点赞数 4

文章标签： javascript html css

本文链接：https://blog.csdn.net/zn0128/article/details/120828910

版权

1、开关灯案例

<!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>
    <script src="common.js"></script>
</head>
<body>
    <input type="button" value="关灯" id="btn">
    <script>
        // 获取元素
        var btn = my$("btn");
        // 定义一个判断变量， true 表示开灯状态， false 表示关灯状态
        var isOpen = true;
        // 给按钮添加事件 控制 body 的背景
        // 方法一：
        btn.onclick = function () {
            // 开灯时，需要点击后让他关灯并切换文字为 开灯
            if (isOpen) {
                document.body.style.backgroundColor = "black";
                this.value = "开灯";
                isOpen = false;
            } else {
                document.body.style.backgroundColor = "white";
                this.value = "关灯";
                isOpen = true;
            }           
        };

        // 方式二：直接使用 btn 的 value 值进行判断
        btn.onclick = function () {
            if (this.value === "关灯") {
                document.body.style.backgroundColor = "black";
                this.value = "开灯";
            } else {
                document.body.style.backgroundColor = "white";
                this.value = "关灯";
            }           
        };
    </script>
</body>
</html>

2、图片二维码显示隐藏切换

<!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>
    <script src="common.js"></script>
    <style>
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
        .box {
            width: 50px;
            height: 50px;
            background: url(images/bgs.png) no-repeat -159px -51px;
            position: fixed;
            left: 10px;
            top: 20%;
        }
        .erweima {
            position: absolute;
            top: 0;
            right: -150px;
        }
        .box a {
            display:

最低0.47元/天解锁文章

zn0128

关注

4
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-- 网页中常见动态效果实现

1、开关灯案例<!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"> <ti
复制链接

扫一扫