JS之dom对象(1)

原创已于 2022-06-30 08:27:48 修改 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-06-29 17:14:39 首次发布

js 专栏收录该内容

5 篇文章

订阅专栏

背景颜色的更换
分时问候案例
表单密码显示效果
页面交换

1 背景颜色的更换

1.获取元素

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>Document</title>
    <style>
        body{
            background: url("./images/p1.jpeg") no-repeat;
            background-size: cover;
        }
        img{
            width: 400px;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/p1.jpeg" alt="">
        <img src="./images/p2.jpeg" alt="">
        <img src="./images/p3.jpeg" alt="">
    </div>
    <script>
        // 1.获取元素
        // 2 通过循环遍历，并且通过点击改变背景图片
        var images=document.querySelector('div').querySelectorAll('img')
        for(var i=0;i<images.length;i++){
            images[i].onclick=function(){
                document.body.style.background="url("+this.src+")";
            }
        }
    </script>
</body>
</html>

2.分时问候案例

// 根据系统不同时间来判断，日期内置函数

//多分支语句来设置不同的图片

//需要一个图片

//需要一个div元素，显示不同问候语

<!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>Document</title>
    <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="./images/s.gif" alt="">
    <div></div>
    <script>
        // 根据系统不同时间来判断，日期内置函数
        //多分支语句来设置不同的图片
        //需要一个图片
        //需要一个div元素，显示不同问候语

        //1、获取元素
        var img=document.querySelector('img');
        var div=document.querySelector('div');
        //2. 得到当前的小时数
        var date=new Date();
        var h=date.getHours();
        //3.判断小时数改变图片和文字信息
        if(h<12){
            img.src='./images/s.gif';
            div.innerHTML='亲，上午好，好好写代码';
        }else if(h<18){
            img.src='./images/x.gif';
            div.innerHTML='亲，下午好，好好写代码';
        }else{
            img.src='./images/w.gif';
            div.innerHTML='亲，晚上好，好好写代码';
        }
    </script>
</body>
</html>

3.表单密码显示效果

注：使用了交叉选择器

先获取元素，再定义一个变量flag

<!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>Document</title>
    <style>
        .password{
            width: 260px;
            height: 30px;
            position: relative;
        }
        .password div{
            width: 20px;
            height: 20px;
            position: absolute;
            right: 5px;
            top: 5px;
            background: url("images/icon_1.png");
        }
        /* 交叉选择器 */
        .password div.hover{
            background: url("./images/icon_2.png");
        }
        .password input{
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="password">
        <div></div>
        <input type="password" name="" id="password" value="">
    </div>
    <script>
        var eyeObj=document.querySelector('.password div');
        // console.log(eyeObj);
        // 开发法
        var flag=false;
        eyeObj.onclick=function(){
            var passwordObj=document.getElementById('password');
            flag=!flag;
            if(flag){
                passwordObj.type='text';
                eyeObj.className='hover';
                // flag=!flag;
            }else{
                passwordObj.type='password';
                eyeObj.className='';
            }
        }
    </script>
</body>
</html>

4.页面交换

<!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>Document</title>
    <style>
        a{
            color:blanchedalmond;
        }
    </style>
</head>
<body>
    <div id="nav">
        <a href="#">行业新闻</a>
        <a href="#">公司新闻</a>
        <a href="#">技术动态</a>
    </div>
    <script>
        // 排他思想
        var nav=document.querySelector('#nav').querySelectorAll('a')
        for(var i=0;i<nav.length;i++){
            nav[i].onclick=function(){
                for(var j=0;j<nav.length;j++){
                    nav[j].style.background="lightblue";
                }
                this.style.background="blue";
            }
        }

    </script>

</body>
</html>