初识dom简单交互效果案例制作~JS

最新推荐文章于 2023-08-08 09:00:36 发布

&Mark&

最新推荐文章于 2023-08-08 09:00:36 发布

阅读量393

点赞数

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

本文链接：https://blog.csdn.net/qq_64970126/article/details/124230927

版权

javascript 专栏收录该内容

68 篇文章 4 订阅

订阅专栏

一、点击不同的button实现页面img的改变

代码如下：注意通过函数动态改变的img路径在编写的时候一定要是相对路径

<body>
    <style>
        div {
            height: 250px;
            width: 333px;
            background-color: pink;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
    <button id="pic1">图片1</button>
    <button id="pic2">图片2</button>
    <div>
        <img src="m1.jpg" alt="" title="picNow" id="img">
    </div>
    <script>
        var pic1 = document.getElementById('pic1');
        var pic2 = document.getElementById('pic2');
        var img = document.getElementById('img');
        // 只能用相对路径，绝对路径报错；
        pic1.onclick = function() {
            img.src = "g8.jpg";
            img.title = 'pic1';
        }
        pic2.onclick = function() {
            img.src = "g9.jpg";
            img.title = 'pic2';
        }
    </script>
</body>

二、根据系统反馈的时间display不同的img

<body>
    <style>
        div {
            width: 250px;
            height: 150px;
        }
        
        img {
            height: 100%;
            width: 100%;
        }
    </style>
    <div>
        <img src="g8.jpg" alt="">
    </div>
    <p></p>
    <script>
        // 调用内置方法输出当前系统时间，参与运算改变time
        var time = new Date();
        var h = time.getHours();
        console.log(h);
        var img = document.querySelector('img');
        var p = document.querySelector('p');
        if (h < 12) {
            img.src = "g9.jpg";
            img.title = "早上好";
            p.innerHTML = '早上好吖';
        } else if (h > 12 && h < 18) {
            img.src = "g8.jpg";
            img.title = "下午好";
            p.innerHTML = '下午好吖';
        } else if (h > 18) {
            img.src = "g8.jpg";
            img.title = "晚上好";
            p.innerHTML = '晚上好吖';
        }
    </script>
</body>

三、点击按钮实现修改表单内的value属性值内容

<body>
    <button>按钮</button>
    <input type="text" name="" id="" value="请输入内容">
    <script>
        var but = document.querySelector('button');
        var input = document.querySelector('input');
        but.onclick = function() {
            // this是强调被调用改变的内容要注意调用的对象会发生相应改变
            input.value = '你好，蟹蟹点击';
            this.disabled = true;
        }
    </script>
</body>

四、密码输入框的名为制作（点击按钮隐藏输入框数据）

<body>
    <style>
        div {
            position: relative;
            width: 300px;
            height: 28px;
            margin: 100px auto;
            border-bottom: 1px solid red;
        }
        
        label {
            position: absolute;
            width: 24px;
            height: 24px;
            top: 5px;
            right: 5px;
        }
        
        label img {
            width: 100%;
            height: 100%;
        }
        
        input {
            outline: none;
            border: 0;
            width: 270px;
            height: 26px;
        }
    </style>
    <div>
        <label for="">
            <img src="img/close.png" alt="" id="img">
        </label>
        <input type="password" id="input">
    </div>
    <script>
        var img = document.querySelector("img");
        var input = document.querySelector("input");
        // 给一个标识符去作为重复点击的算法;让明文能一直以不同的方式展现；
        var flag = 0;
        img.onclick = function() {
            if (flag == 0) {
                this.src = "img/open.png";
                input.type = "text";
                flag = 1;
            } else {
                this.src = "img/close.png";
                input.type = "password";
                flag = 0;
            }
        }
    </script>
</body>

注意：我们设置一个flag变量去实现能不断点击按钮实现相应操作