JavaScript（DOM案例）

最新推荐文章于 2023-12-19 14:09:42 发布

Han_Zhou_Z

最新推荐文章于 2023-12-19 14:09:42 发布

阅读量630

点赞数 3

文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/Han_Zhou_Z/article/details/121568501

版权

1、点击按钮，转换图片，以及当鼠标划到图片时，图片转换

<body>
    <button id="xunhua">驯化者</button>
    <button id="yingxiong">英雄</button>
    <br><br>
    <img src="../imgs/xunhua.jpg" alt="" title="驯化者" width="200" height="300">
    <script>
        //获取页面元素
        var xunhua = document.getElementById('xunhua')
        var yingxiong = document.getElementById('yingxiong')
        var img = document.querySelector('img')
        //注册事件处理程序
        xunhua.onclick = function(){
            img.src = '../imgs/xunhua.jpg'
            img.title = '驯化者'
        }
        yingxiong.onclick = function(){
            img.src = '../imgs/yingxiong.jpg'
            img.title = '英雄'
        }
        img.onmouseover = function(){//鼠标光标进入的时候，显示的是驯化者
            img.src = '../imgs/xunhua.jpg'
            img.title = '驯化者'
        }
        img.onmouseout = function(){//鼠标光标离开的时候，显示的是英雄
            img.src = '../imgs/yingxiong.jpg'
            img.title = '英雄'
        }
    </script>
</body>

2、点击睁眼和闭眼的图片，使密码同时变得不可见或者可见

<body>
    <div id="box">
        <label>
            <img src="../imgs/QQ图片20211120133746.png" alt="" id="eye">
            <!-- <img src="../imgs/QQ图片20211120133812.png" alt=""> -->
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //1、获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;//标记变量，用来标记图片是打开的还是关闭的
        //2、注册事件，以及定义事件的处理程序
        eye.onclick = function(){
            if(flag==0){
                pwd.type = 'text';
                eye.src = '../imgs/QQ图片20211120133812.png';
                flag = 1;
            }else{
                pwd.type = 'password';
                eye.src = '../imgs/QQ图片20211120133746.png';
                flag = 0;
            }
        }

    </script>
</body>

3、点击方块，使方块的形态都发生变化

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .change{
        background-color: purple;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>
<body>
    <div class="first">撸起袖子加油干</div>
    <script>
        //1、获取元素
        var div = document.querySelector('div');
        //2、给你div注册一个事件
        div.onclick = function(){
            this.className = 'change';
        }
    </script>
</body>

4、当鼠标未点击输入框时，文字是灰色。当鼠标点击输入框时，文字是黑色

<body>
    <div>
        <label>
            <input type="text" id="userName" value="手机" style="color: #999;">
        </label>
    </div>
    <script>
        //1、获取元素
        var text = document.querySelector('input');
        text.onchange//当文本框内容发生改变是
        //2、给获取的元素注册一个获取焦点的事件   onfocus
        text.onfocus = function(){
            if(this.value ==='手机'){
                this.value = '';
            }
            this.style.color = '#333';
        }
        //3、给元素注册失去焦点的事件  onblur
        text.onblur = function(){
            if(this.value===''){
              this.value = '手机';  
            }
            this.style.color = '#999';
        }
    </script>
</body