美文网首页
DOM操作练习(1)

DOM操作练习(1)

作者: 天使投资 | 来源:发表于2018-05-29 20:22 被阅读0次

    1.显示和隐藏盒子。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>显示和隐藏盒子</title>
    <style>
    button {
        margin: 10px;
    }

    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }
    </style>
</head>

<body>
    <button id="btn">隐藏</button>
    <div></div>
    <script>
    //需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
    //步骤：
    //1.获取事件源和相关元素
    //2.绑定事件
    //3.书写事件驱动程序
    var btn = document.getElementById("btn");
    var div = document.getElementsByTagName("div")[0];

    btn.onclick = function() {
        if (this.innerHTML === "隐藏") {
            div.className = "hide";
            btn.innerHTML = "显示";


        } else {
            div.className = "show";
            btn.innerHTML = "隐藏";

        }
    }
    </script>
</body>

</html>

    2.切换图片

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img id="icon" src="img/icon_01.png" alt="">
    <p></p>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var icon = document.getElementById("icon");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        // 2. 监听按钮的点击
        var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
        prev.onclick = function () {
            if (currentIndex === minIndex){ // 边界值
                currentIndex = maxIndex;
            }else { // 正常情况
                currentIndex --;
            }

            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

            console.log(icon.src);
        };

        next.onclick = function () {
             if (currentIndex === maxIndex){ // 边界值
                 currentIndex = minIndex;
             }else { // 正常情况
                 currentIndex ++;
             }

             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

            console.log(icon.src);
        };
    }
</script>
</body>
</html>

    3.宠物相册

    动物相册.png 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            margin: 50px;
        }

        #fj{
            list-style: none;
        }

        #fj li{
            float: left;
            margin-left: 10px;
        }

        #big_img{
            margin-left: 10px;
        }

        #des{
            margin: 10px;
            color: orangered;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!--大图描述-->
    <p id="des">蒲公英</p>
    <!--大图展示-->
    <img id="big_img" src="img/1.jpg" alt="" width="540">
    <!--小图列表-->
    <ul id="fj">
        <li>
            <a href="img/1.jpg" title="蒲公英">
                <img src="img/1.jpg" width="100" alt="蒲公英">
            </a>
        </li>
        <li>
            <a href="img/2.jpg" title="热气球">
                <img src="img/2.jpg" width="100" alt="热气球">
            </a>
        </li>
        <li>
            <a href="img/3.jpg" title="别致小屋">
                <img src="img/3.jpg" width="100" alt="别致小屋">
            </a>
        </li>
        <li>
            <a href="img/4.jpg" title="高山湖水">
                <img src="img/4.jpg" width="100" alt="高山湖水">
            </a>
        </li>
        <li>
            <a href="img/5.jpg" title="高速公路">
                <img src="img/5.jpg" width="100" alt="高速公路">
            </a>
        </li>
    </ul>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var ul = document.getElementById("fj");
        var aList = ul.getElementsByTagName("a");
        // console.log(aList[1]);

        var des = document.getElementById("des");
        var big_img = document.getElementById("big_img");

        // 2.绑定事件
        for(var i=0; i<aList.length; i++){
            aList[i].onclick = function () {

                big_img.src = this.href;
                des.innerHTML = this.title;

               /* console.log(this.href);
                console.log(this.title);*/
                return false;
            }
        }
    }
</script>
</body>
</html>

    4.关闭小广告

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: relative;
            display: inline-block;
        }

        #close{
            position: absolute;
            right: 18px;
            top:18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <img id="icon" src="img/img1.jpg" alt="" width="258">
    <img id="close"  src="img/close.jpg" alt="" width="40">
</div>
<script type="text/html">
    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var close = document.getElementById("close");

        // console.log(box, close);

        // 2. 给事件源绑定事件
        close.onclick = function () {
            box.style.display = "none";
        }
    }
</script>
<script>
    window.onload = function () {
        // 1. 获取标签
        var close = document.getElementById("close");

        // 2. 监听点击事件
        close.onclick = function () {
            this.parentNode.style.display = "none";
        }
    }
</script>
</body>
</html>

    5.二维码显示和隐藏

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #e_coder{
            width: 50px;
            height: 50px;

            background: url("images/e_coder_normal.png") no-repeat;

            position: fixed;
            top: 40%;
            left: 0;

            cursor: pointer;
        }

        #e_app{
            position: absolute;
            left: 50px;
            top: -50px;

            /*隐藏*/
            display: none;
        }
    </style>
</head>
<body>
    <div id="e_coder">
        <div id="e_app">
            <img src="images/e_coder.jpg" alt="公众号" width="150">
        </div>
    </div>

<script>
    window.onload = function () {
        // 1.获取相应的标签
        var e_coder = document.getElementById("e_coder");
        var e_app = document.getElementById("e_app");
        
        // 2.监听鼠标进入
        e_coder.onmouseover = function () {
            // 2.1 改变背景图片
            this.style.background = 'url("images/e_coder_selected.png") no-repeat';
            // 2.2 显示二维码
            e_app.style.display = "block";
        };

        // 3. 监听鼠标的离开
        e_coder.onmouseout = function () {
            // 3.1 改变背景图片
            this.style.background = 'url("images/e_coder_normal.png") no-repeat';
            // 3.2 隐藏二维码
            e_app.style.display = "none";
        }
    }
</script>
</body>
</html>

    6. 图标切换

    图标切换.png 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box{
            border: 1px solid #cccccc;

            width: 360px;
            height: 70px;

            padding-top: 360px;
            margin: 100px auto;

            background: url("images/01big.jpg") no-repeat;
        }

        ul{
            display: flex;
            justify-content: center;
            align-items: center;

            cursor: pointer;
        }
    </style>
</head>
<body>
   <div id="box">
       <ul>
           <li><img src="images/01.jpg" alt=""></li>
           <li><img src="images/02.jpg" alt=""></li>
           <li><img src="images/03.jpg" alt=""></li>
           <li><img src="images/04.jpg" alt=""></li>
           <li><img src="images/05.jpg" alt=""></li>
       </ul>
   </div>

<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var allLi = box.getElementsByTagName("li");

        // 2. 监听鼠标的进入
        for(var i=0; i<allLi.length; i++){
            var sLi = allLi[i];
            sLi.index = i+1;
            sLi.onmouseover = function () {
                console.log(this.index);
                box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';
            }
        }
    }
</script>
</body>
</html>

    7.百度换肤

    百度换肤.png 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;

            vertical-align: top;
        }

        body{
            background: url("images/1.jpg") no-repeat;
            background-size:cover;
        }

        #box{
            background-color: rgba(255, 255, 255, .5);
        }

        #box ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor: pointer;
        }


        #box ul li img{
            width: 180px;
            height: 120px;

            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
    </div>

<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var allLis = box.getElementsByTagName("li");

        // 2. 遍历监听
        for(var i=0; i<allLis.length; i++){
            // 2.1 取到当个li
            var sLi = allLis[i];
            sLi.index = i+1;
            // 2.2 绑定事件
            sLi.onclick = function () {
                document.body.style.background = 'url("images/'+ this.index +'.jpg") no-repeat';
            }
        }
    }
</script>
</body>
</html>

    相关文章

      网友评论

          本文标题：DOM操作练习(1)

          本文链接：https://www.haomeiwen.com/subject/jktzjftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|DOM操作练习(1)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！