【作业练习】网页换色、分时显示不同图片,显示不同问候语。、输入密码长度6~16位、百度换肤、表格中行的全选和全不选、实现留言板、插入节点：每次都插在最前面

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127649751

该博客详细介绍了如何实现一系列网页交互功能：包括网页背景颜色切换、根据时间显示不同问候及图片、密码框的格式验证、百度风格的换肤功能、表格行的全选与全不选操作，以及留言板功能的构建。此外，还涵盖了在DOM中插入节点到最前面的方法。

摘要由CSDN通过智能技术生成

url():地址转换函数。作用是将用户传入的地址转换为网络地址

1、网页换色。4个按钮，点击按钮网页背景变成对应的颜色

<style>
    .yellow {
        background-color: yellow;
    }
    .green {
        background-color: green;
    }
    .black {
        background-color: black;
    }
    .recover {
        background-color: white;
    }
</style>
<body id="all">
    <button id="yellow">点击变黄</button>
    <button id="green">点击变绿</button>
    <button id="black">点击变黑</button>
    <button id="recover">点击恢复</button>
    <script>
        // 黄
        let btn_yellow = document.getElementById('yellow')
        btn_yellow.addEventListener('click', function () {
            document.getElementById('all').setAttribute('class', 'yellow')
        })
        // 绿
        let btn_green = document.getElementById('green')
        btn_green.addEventListener('click',function(){
            document.getElementById('all').setAttribute('class','green')
        })
        // 黑
        let btn_black = document.getElementById('black')
        btn_black.addEventListener('click',function(){
            document.getElementById('all').setAttribute('class','black')
        })
        // 恢复
        let btn_recover = document.getElementById('recover')
        btn_recover.addEventListener('click',function(){
            document.getElementById('all').setAttribute('class','recover')
        })
    </script>
</body>

2、分时显示不同图片,显示不同问候语。

（1）如果是上午时间打开页面，显示上午好，显示上午的图片。

（2）如果是下午时间打开页面，显示下午好，显示下午的图片。

（3）如果是晚上时间打开页面，显示晚上好，显示晚上的图片。

<style>
    div{
        background-repeat: no-repeat;
        background-size: contain;
        width: 200px;
        height: 200px;
        margin: 50px auto;
    }
    .first{
        background-image: url(./images/morning.png);
    }
    .second{
        background-image: url(./images/afternoon.png);
    }
    .third{
        background-image: url(./images/evening.jpg);
    }
</style>
<body>
    <div id="all"></div>
    <script>     
        let all = document.getElementById('all')
        function getTimes() {
            let now = new Date()
            let hour = now.getHours()
            if (hour >= 6 && hour < 12) {
                document.getElementById('all').innerText='Good morning!'
                document.getElementById('all').setAttribute('class','first')
            } else if (hour >= 12 && hour < 18) {
                document.getElementById('all').innerText='下午好'
                document.getElementById('all').setAttribute('class','second')
            }else if (hour >= 18 && hour < 24 && hour < 6) {
                document.getElementById('all').innerText='晚上好'
                document.getElementById('all').setAttribute('class','third')
            }
        }
        getTimes()
    </script>
</body>

3、密码框格式提示错误信息。用户输入密码后点击验证按钮，里面输入密码长度不是6~16位