DOM操作练习(1)

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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容

  • DOM操作练习
    题目1： dom对象的innerText和innerHTML有什么区别？ innerText是一个可写属性，返回元...
    头大如牛阅读 875评论 0赞 0
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,726评论 1赞 92
  • 我们的生活，有时候需要断舍离
    01 一个自己单独做外贸SOHO的姑娘A又跟我聊天儿，前段时间帮她开导过，但她似乎还是走不出目前这种痛苦的状态。 ...
    烟雨红晨阅读 476评论 6赞 4
  • 如果
    如果我没有遇见你，孤舟泛起垂钓千山雪， 如果我没有遇见你，独立黄昏不想粥可温， 如果我没有遇见你，银鞍照白马意气风...
    荒原芜桑阅读 169评论 0赞 0
  • 2018-05-10
    如梦令 夏日黄昏山雾，风起花香浓郁。正是梅子时，仰看云散云聚。 风住，风住，闲坐小亭如絮。
    时空暗格阅读 168评论 0赞 0