DOM实例2

最新推荐文章于 2024-11-02 12:42:04 发布

晚枫~

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量344

点赞数

分类专栏： js练习文章标签： javascript

本文链接：https://blog.csdn.net/IT913913/article/details/122936110

版权

js练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>Document</title>
    <style>
        input{
            color:#999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        //1.获取元素
        var text = document.querySelector('input');
        //2.注册事件  获得焦点事件   onfocus
        text.onfocus = function(){
            // console.log('得到焦点');
            if(this.value === '手机'){
                this.value = '';
            }
            //获得焦点需要把文本框里面的文字颜色变黑
            this.style.color = '#333';
        }
        //3.注册事件  失去焦点事件   onblur
        text.onblur = function(){
            // console.log('失去焦点');
            if(this.value === ''){
                this.value = '手机';
            }
            //失去焦点需要把文本框里面的文字颜色变灰
            this.style.color = '#999';
        }
    </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>Document</title>
    <style>
        div{
            width: 600px;
            margin: 100px auto;
        }

        .message{
            display: inline-block;
            font-style: 12px;
            color: #999;
            background: url(img/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        .wrong{
            color: red;
            background-image: url(img/wrong.png);
        }
        .right{
            color: green;
            background-image: url(img/right.png);
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // ① 首先判断的事件是表单失去焦点 onblur
        // ② 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // ③ 如果输入不是6到16位，提示错误信息颜色为红色 小图标变化
        // ④ 因为变化样式较多，采取className修改样式
        //1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2.注册事件  失去焦点
        ipt.onblur = function(){
            //根据表单里面值的长度 ipt.value.length
            if(this.value.length <6 || this.value.legnth >16){
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数有误，要求6~16位'
            }else{
                message.className = 'message right';
                message.innerHTML = '输入正确';
            }
        }
    </script>
</body>
</html>

3.百度换肤效果

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(img/1.jpg) no-repeat center top;
        }
        li{
            list-style: none;
        }
        .baidu{
            overflow: hidden;   /*溢出隐藏、清除浮动、解决外边距塌陷*/
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        .baidu li{
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img{
            width: 100px;
        }
    </style>
</head>
<body>
    <ul class="baidu"> 
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
    </ul>
    <script>
        //1.获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        //2.循环注册事件
        for(var i = 0;i<imgs.length;i++){
            imgs[i].onclick = function(){
                // console.log(this.src);    //this.src 是点击图片的路径
                document.body.style.backgroundImage = 'url('+this.src+')';
            }
        }
    </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>
        table{
            width: 800px;
            margin: 100px auto;
            text-align: left;
            border-collapse: collapse;  /*设置行和单元格的边是否合并*/
            font-size: 14px;
        }
        thead tr{
            height: 30px;
            background-color: skyblue;
        }
        tbody tr{
            height: 30px;
        }
        tbody td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>浓因金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>浓因金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>浓因金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>浓因金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>浓因金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>浓因金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>浓因金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.获取元素  获取的是tbody里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //2.利用循环绑定注册事件
        for(var i=0;i<trs.length;i++){
            //3.鼠标经过事件  onmouseover
            trs[i].onmouseover = function(){
                console.log(11);
                this.className = 'bg';
            } 
            //4.鼠标离开事件   onmouseout
            trs[i].onmouseout = function(){
                this.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>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 300px;
            margin: 100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            bottom: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td{
            bottom: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="all">
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="one">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
        // 获取元素
        var all = document.getElementById('all');  //全选按钮
        var one = document.getElementById('one').getElementsByTagName('input');   //下面所有的复选框
        // 注册事件
        all.onclick = function(){
            //this.checked 可以得到当前复选框的选中状态。如果是true就是选中，如果是false，就是未选中
            console.log(this.checked);
            for(var i=0;i<one.length;i++){
                one[i].checked = this.checked;
            }
        }
        //2.下面复选框需要全部选中，上面全选才能选中
        // 做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否又没选中的，
        // 如果有一个没选中的，上面全选就不选中
        for(var i=0;i<one.length;i++){
            one[i].onclick = function(){
                //flag控制全选按钮是否选中
                var flag = true;
                //每次点击下面的复选框都要循环检查4个小按钮是否全被选中
                for(var i=0;i<one.length;i++){
                    if(!one[i].checked){
                        flag = false;
                        break;//退出for循环，这样可以提高执行效率，因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                all.checked = flag;
            }
        }
    </script>
</body>
</html>