DOM操作元素例题

m0_71251536

已于 2022-06-16 12:18:11 修改

阅读量242

点赞数

文章标签： html css javascript

于 2022-06-11 09:35:32 首次发布

本文链接：https://blog.csdn.net/m0_71251536/article/details/125210645

版权

1，一个京东简易登录，密码框可以隐藏和显示，主要练习获取表单元素的方法

 <head>
 <style>
        .dl {
            text-align: center;
        }

        .zh {
            width: 200px;
            height: 30px;
            margin: 20px auto;
            border-bottom: 1px solid #ccc;
        }

        .zh input {
            width: 200px;
            height: 25px;
            border: none;
            outline: none;
        }

        .mm {
            position: relative;
            width: 200px;
            height: 30px;
            margin: 20px auto;
            border-bottom: 1px solid #ccc;
        }

        .mm input {
            width: 120px;
            height: 25px;
            border: none;
            outline: none;
        }

        .mm img {
            position: absolute;
            top: 5px;
            right: 50px;
            width: 20px;
            height: 20px;
        }

        .mm a {
            float: right;
            margin-top: 5px;
            font-size: 10px;
            text-decoration: none;
        }
        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="dl">
        <h4>京东登录</h4>
    </div>
    <div class="zh">
        <input type="text" placeholder="账号">
    </div>
    <div class="mm">
        <input id="mmk" type="password" placeholder="密码">

        <label for=""><img src="close.png" alt="" id="eye"> </label>

        <a href="">忘记密码</a>

        <script>
            var inp = document.getElementById('mmk');
            var img = document.getElementById('eye');
            var flag = false;
            img.onclick = function () {
                if (flag == false) {
                    inp.type = 'text';
                    img.src = 'open.png';
                    flag = true;
                } else {
                    inp.type = 'password';
                    img.src = 'close.png';
                    flag = false;
                }
            }

        </script>
    </div>
    <h3><a href="">登录</a></h3>
</body>

2，做两个按钮，一个睁眼，一个闭眼，点击睁眼是睁眼图片，点击闭眼是闭眼图片

    <img src="close.png" alt=""><br>
    <button id="by">闭眼</button>
    <button id="zy">睁眼</button>
    <script>
        var by = document.getElementById('by'); 
        var zy = document.getElementById('zy');
        var img = document.querySelector('img'); //获取以上三个事件源
        zy.onclick = function() { //事件类型：点击
            img.src = 'open.png'; //事件处理：改变图片地址
        }
        by.onclick = function () {
            img.src = 'close.png';
        }
    </script>

3，做一个切换按钮，改变眼睛睁眼闭眼状态

    <img src="close.png" alt=""><br>
    <button>切换</button>
    <script>
        var btn = document.querySelector('button'); 
        var img = document.querySelector('img'); 
        var flag = true;
        btn.onclick = function() {
            if (flag) {           
                img.src = 'open.png';
                flag = false;
            } else {
                img.src = 'close.png';
                flag = true;
            }
        }
    </script>

4，隐藏密码案例：在input输入框后面放可以隐藏 input文本内容的眼睛

    <style>
        input {
            float: left;
            width: 170px;
            height: 20px;
        }
        img {
            width: 24px;
            height: 24px;
        }
    </style>



<body>
    <input type="password" alt="">
    <img src="close.png">
    <script>
        var inp = document.querySelector('input');
        var img = document.querySelector('img');
        var flag = true;
        img.onclick = function () {
            if (flag) {
                img.src = 'open.png';
                inp.type = 'text'
                flag = false;
            } else {
                img.src = 'close.png';
                inp.type = 'password';
                flag = true;
            }
        }
    </script>
</body>

5，隐藏密码：在input输入框里面靠后放入一个眼睛图片（或字体图标），这样隐藏或显示文本内容

——还未解决，不知怎么在输入框里放图片或字体图标——

6，点击X按钮，整个二维码隐藏起来（用到js里修改样式的方法 .style 注意可以在css样式里给 X号添加一个鼠标样式 cursor:pointer;)

    <script>
        var btn = document.querySelector('.btn');
        var ewm = document.querySelector('.ewm');
        btn.onclick = function() {
            ewm.style.display = 'none';
        }
    </script>

7,用dom操作元素+for循环实现精灵图快速定位

    <style>
        ul {
            margin: 50px auto;
            width: 260px;
            height: 200px;

        }

        ul li {
            float: left;
            list-style: none;
            width: 24px;
            height: 24px;
            margin: 20px 20px;
            background: url(sprite.png) no-repeat; /*精灵图放在这里*/
        }
    </style>

    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var index = 44 * i; //注意相邻精灵图之间的距离，加上精灵图的高可以得出每个精灵图y坐标的距离
            lis[i].style.backgroundPosition = '0 -' + index + 'px';//注意是lis[i],
        }

    </script>

8.显示和隐藏文本框内容 onfoucs和onblur

<script>
        var inp = document.querySelector('input');
        inp.onfocus = function () {
            if (this.value == '手机') {
                this.value = ''; //将value值清空，而不是用display隐藏
            }
            this.style.color = '#333';   //默认文本颜色是#999，输入时文本颜色用#333更清楚
        }
        inp.onblur = function () {
            if (this.value == '') {
                this.value = '手机';
            }
            this.style.color = '#999';
        }

 </script>

9,开关灯

    <script>
        var btn = document.querySelector('button');
        var body = document.querySelector('body');
        var flag = true;//定义flag的true false可以确定是开还是关
        btn.onclick = function () {
            if (flag) { 
                body.style.backgroundColor = 'black';
                flag = false;//如果是真就改背景为黑色，改flag为false,不然下次点击flag还是真
            } else {
                body.style.backgroundColor = 'white';
                flag = true; //flag 为假也是同理
            }
        }
    </script>

10.仿世纪佳缘账号密码输入框效果，——做出来了但有疑问——

<!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 {
            width: 130px;
            height: 22px;
            padding-left: 5px;
            color: rgb(170, 170, 170);
            outline: none;
            border: 1px solid rgb(217, 217, 217);
        }

        .inp-bor {
            border: 1px solid rgb(255, 214, 219);
        }
        .inp-txt {
            color: rgb(51, 51, 51);
        }
        button {
            width: 70px;
            height: 25px;
            border: none;
            color: #eee;
            background-color: rgb(0, 152, 194);
        }
    </style>
</head>

<body>
    <div class="sjjy">
        <input id="inp1" type="text" value="邮箱/ID/手机号">
        <input id="inp2" type="text" value="密码">
        <button>登录</button>
    </div>
    <script>
        var inp1 = document.getElementById('inp1');
        var inp2 = document.getElementById('inp2');
        var btn = document.querySelector('button');
        inp1.onfocus = function () {
            if (inp1.value == '邮箱/ID/手机号') {
                                                   //3
                inp1.value = '';
                inp1.className = 'input inp-bor'; //1 和 2 两行是一样的，我觉得应该可以都不要直接写到3处，但是最后显示效果却又不一样。写在3处后，比如在文本框输入一个数字后，外面点一下，再点回文本框，border不变红，文字
            } else {
                inp1.className = 'input inp-txt';
                inp1.className = 'input inp-bor'; //2
            }
        }
        inp1.onblur = function() {
            inp1.className = 'input';
            if (inp1.value == '') {
                inp1.value = '邮箱/ID/手机号';
            } else {
                inp1.className = 'input inp-txt';
            }
        }
    </script>
</body>

</html>

10，新浪导航下拉菜单

html+script代码部分：

<!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>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="tl">
        <!-- 这是主导航栏nav -->
        <div class="nav">
            <!-- 这是主导航栏左侧 nav_left -->
            <div class="nav_left">
                <ul>
                    <li><a href="">设为首页</a></li>
                    <li><a href="">手机新浪网</a></li>
                    <li><a href="">移动客户端</a>
                        <dl>
                            <dt><a href="">新浪微博</a></dt>
                            <dt><a href="">新浪新闻</a></dt>
                            <dt><a href="">新浪财经</a></dt>
                            <dt><a href="">新浪体育</a></dt>
                            <dt><a href="">黑猫投诉</a></dt>
                            <dt><a href="">新浪博客</a></dt>
                            <dt><a href="">新浪游戏</a></dt>
                            <dt><a href="">新浪众测</a></dt>
                            <dt><a href="">新浪邮箱客户端</a></dt>
                        </dl>
                    </li>
                </ul>
            </div>
            <!-- 这是主导航栏右侧 nav_right -->
            <div class="nav_right">
                <ul>
                    <li><a href="">登录</a></li>
                    <li><a href="">微博</a>
                        <dl>
                            <dt><a href="">私信</a></dt>
                            <dt><a href="">评论</a></dt>
                            <dt><a href="">@我</a></dt>
                        </dl>
                    </li>
                    <li><a href="">博客</a>
                        <dl>
                            <dt><a href="">博客评论</a></dt>
                            <dt><a href="">博客提醒</a></dt>
                        </dl>
                    </li>
                    <li><a href="">邮箱</a>
                        <dl>
                            <dt><a href="">免费邮箱</a></dt>
                            <dt><a href="">VIP邮箱</a></dt>
                            <dt><a href="">企业邮箱</a></dt>
                            <dt><a href="">新浪邮箱客户端</a></dt>
                        </dl>
                    </li>
                    <li><a href="">网站导航</a></li>
                </ul>
            </div>

        </div>

    </div>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

css代码部分：

* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?tr9v8m');
    src: url('fonts/icomoon.eot?tr9v8m#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?tr9v8m') format('truetype'),
        url('fonts/icomoon.woff?tr9v8m') format('woff'),
        url('fonts/icomoon.svg?tr9v8m#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

li {
    position: relative;
    list-style-type: none;
    display: inline;
    float: left;
}
a {
    text-decoration: none;
    display: block;
    font-size: 14px;
    color: rgb(76, 76, 76);
}

li>a {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
}
li>a:hover {
    color: rgb(255, 132, 0);
    background-color: rgb(237, 238, 240);
}
.nav_left li:nth-child(3)>a::after,
.nav_right li:nth-child(2)>a::after,
.nav_right li:nth-child(3)>a::after,
.nav_right li:nth-child(4)>a::after {
    content: '';
    font-family: 'icomoon';
    padding-left: 5px;
    color: rgb(255, 134, 5);
}

dl {
    display: none;
    position: absolute;
}

dt {
    border: 1px solid rgb(235, 190, 122);
    border-top: 0;
}

dt a {
    padding: 0 20px;
    width: 100px;
    height: 30px;
    line-height: 30px;
}
dt a:hover {
    color: rgb(255, 132, 0);
    background-color: rgb(255, 245, 218);
}


.tl {
    width: 100%;
    height: 50px;
    border-top: 2px solid rgb(255, 133, 0);
    border-bottom: 1px solid rgb(237, 238, 240);
    background-color: rgb(252, 252, 252);
}
.nav {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}
.nav .nav_left {
    float: left;
}
.nav .nav_right {
    float: right;
}

11.百度换肤（主要点在于路径更换的格式）

    <script>
        var imgs = document.querySelectorAll('img');
        // var body = document.querySelector('body'); //可以事先获取body 也可以document.body获取
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                document.body.style.backgroundImage = 'url(' + this.src + ')'; //注意此处路径的写法
            }
        }
    </script>

12,分别点亮按钮（排它思想）

    <script>
        var btns = document.getElementsByTagName('button');
        //btns得到的时伪元素，每一个元素就是btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () { 
                for (var j = 0; j < btns.length; j++) { //在点亮按钮之前先去掉所有按钮的背景色，以免出现多个按钮被点亮
                    btns[j].style.backgroundColor = '';
                }
                    this.style.backgroundColor = 'pink';
            }
        }
    </script>

13，表格单行高亮（用排它思想）

    <script>
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
                for (var j = 0; j < trs.length; j++) {
                    trs[j].style.backgroundColor = '';
                }
                    this.style.backgroundColor = 'pink';
            }
        }
    </script>

14，表单全选取消案例（重要,多看几次，不好理解）

<script>
        var hinp = document.getElementById('thinp');
        var binps = document.getElementById('tbinp').getElementsByTagName('input');
        hinp.onclick = function () {
            this.checked;
            for (var i = 0; i < binps.length; i++) {
                binps[i].checked = this.checked;
            }
        }
        for (var i = 0; i < binps.length; i++) { //这个for设置每个binps的点击事件
            binps[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < binps.length; i++) { //这个for检查binps的每一个框是否被选中
                    if(!binps[i].checked) {
                        flag = false;
                        break; //只要有一个没有被checked,就可以直接退出循环，提高代码效率
                    }
                    hinp.checked = flag;
                }

            }
        }
</script>

15.京东详情页type栏切换效果（排它思想）

    <script>
        var lis = document.querySelector('.tb_list').querySelectorAll('li');
        var items = document.querySelectorAll('.item');

        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('date-index', i); //给lis设置自定义属性并赋值
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'tb_list_curr';
                var index = this.getAttribute('date-index'); //获取自定义属性的值
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }

        }

    </script>