您的位置: 首页  >  IT文章  >  前端JavaScript之DOM使用案例

前端JavaScript之DOM使用案例

分类: IT文章 • 2025-01-09 23:38:20

1.弹出框点击关闭

（这个例子关键自己创建标签以及属性，不是太好想啊，而且作用相对来数也不是太大）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                 100%;
                height: 100%;
                background: rgba(0,0,0,.3);
            }
            #content{
                position: relative;
                top: 150px;
                 400px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                color: red;
                background-color: #fff;
                margin: auto;
            }
            #span1{
                position: absolute;
                background-color: red;
                top: 0;
                right: 0;
                 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;

            }
        </style>
    </head>
    <body>
        <button >弹出</button>
    </body>
    <script type="text/javascript">
        //获取dom元素 1.获取事件源
        var oBtn = document.getElementById('btn');
        //创建弹出模态框的相关DOM对象
        var oDiv = document.createElement('div');
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        
        
        // 设置属性
        oDiv.id = 'box';
        oP.id = 'content'
        oP.innerHTML = '模态框成功弹出'
        oSpan.innerHTML = 'X';
        oSpan.id = 'span1'
        
        // 追加元素
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);

        // 点击弹出按钮 弹出模态框
        oBtn.onclick = function(){
            //动态的添加到body中一个div
            this.parentNode.insertBefore(oDiv,btn)
            
        }
        // 点击X 关闭模态框
        oSpan.onclick = function(){
            // 移除oDiv元素
            oDiv.parentNode.removeChild(oDiv)
        }   

        // 1.购物车
        // 2.模态框
        
    </script>
</html>
View Code

现在来看看反向从现有的进行操作，这个顺着看比上一个好理解一点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }

        .box{
             100%;
            height: 100%;
            background: rgba(0,0,0,.3);
           
        }
        .content{
            position: relative;
            top: 150px;
             400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: red;
            background-color: #fff;
            margin: auto;       
        }
        .span1{
            position: absolute;
            background-color: red;
            top: 0;
            right: 0;
             30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
        }     

        div{
             display: none;
        }
        p{
             display: none;
        }
        span{
             display: none;
        }
    </style>
</head>
<body>
     <button >弹出</button>
    <div class="box" >
        <p class="content" >模拟态弹出
            <span class="span1" >x</span>
        </p>
    </div>
    <script type="text/javascript">
        var oClose = document.getElementById('x');
        var oBtn = document.getElementById('btn');
        var oDiv = document.getElementById('div');
        var oP = document.getElementById('p');
        oBtn.onclick = function(){
            oBtn.style.display = "none";
            oDiv.style.display = "block";
            oP.style.display = "block";
            oClose.style.display = "block";
        }
        oClose.onclick = function(){
            oBtn.style.display = "block";
            oDiv.style.display = "none";
            oP.style.display = "none";
            oClose.style.display = "none";
        }
    </script>
</body>
</html>
View Code

2.鼠标放到输入框里面，自动弹出框下内容

（这里其实重点在于两个盒子紧靠后，如何让重合部位的线条被背景遮盖住，只要这个实现了，后面使用css就方便了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            background-color: rgba(0,0,0,0.2);
            position: relative;
            margin: 0 auto;
            height:400px;
             600px;
        }
        .border{
             200px;
            height: 40px;            
            background-color: red;
            position: absolute;
            top: 60px;
            left: 30px;
            z-index: 10;
            border:2px solid black;
           
           
        }
        .bottom{
             300px;
            height:50px;
            position: absolute;
            top: 100px;
            left: 30px;
            border:2px solid black;
            z-index: 0;
            display: none;
        }
        div.c{
            border-bottom- 0px;
        }

    </style>
    
</head>
<body >
    <div class="box">
        
        <div class="border" >666</div>
        <div class="bottom" ></div>  
    </div>
    <script type="text/javascript">
        var oBorder = document.getElementById("myBorder");
        var oBottom = document.getElementById("myBottom");

        oBorder.onmouseenter = function(){
            oBottom.style.display = "block";
            oBorder.className += " c";
        }
        oBorder.onmouseleave = function(){
             oBottom.style.display = "none";
             oBorder.className = "border";
        }
    </script>
       
</body>
    
</html>
View Code

效果：

前端JavaScript之DOM使用案例

鼠标放到事件上面，随着左右移动，事件发生改变，出现轮播效果

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            #tab{
                 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul{
                 100%;
                overflow: hidden;
            }
            ul li{
                float: left;
                 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #cccccc;
            }
            
            ul li a{
                text-decoration: none;
                color:black;
            }
            li.active{
                background-color: red;
            }
            p{
                display: none;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: red;
            }
            p.active{
                display: block;
                
            }
            
        </style>
    </head>
    <body>
        <div >
            <ul>
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">新闻</a>
                </li>
                <li>
                    <a href="#">图片</a>
                </li>        
            </ul>
            <p class="active">首页内容</p>
            <p>新闻内容</p>
            <p>图片内容</p>
            
            
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
                    //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。

            var tabli = document.getElementsByTagName('li');
            var tabContent = document.getElementsByTagName('p')
            
            // js的一个坑
            for(let i = 0; i < tabli.length; i++){
                // 绑定索引值（新增一个自定义属性：index属性）
                // tabli[i].index  = i;
                tabli[i].onclick = function(){
                    
                    // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                    for(var j = 0; j < tabli.length; j++){
                        tabli[j].className = '';
                        tabContent[j].className = '';
                    }    
                    this.className = 'active';
                    console.log(i);
                    tabContent[i].className = 'active';//【重要代码】
                }
        }
        }
        
    </script>
</html>
View Code

 和上面类似的案例，京东轮播图，鼠标放上去，li本身变色，对应上p显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        /*一个480的大盒子*/
        #tab{
             480px;
            /*距顶部10px，居中*/
            margin:10px auto;
            border: 1px solid red;
        }
        ul{
             100%;
            overflow: hidden;
        }
        ul li{
            float: left;
             160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #ccc;
        }
        /*字体设置*/
        ul li a{
            text-decoration: none;
            color: blue;
        }
        li.active{
            background-color: red;
        }
        p{
            /*对于下部进行隐藏，否则就同时显现了*/
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: red;
        }
        /*这里对下部在进行活动打开*/
        p.active{
            display: block;
        }
    </style>
</head>
<body>
    <div >
        <ul>
            <!-- 首页显示 -->
            <li class="active">
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">新闻</a>
            </li>
            <li>
                <a href="#">图片</a>
            </li>
        </ul>
        <p class="active">首页内容</p>
        <p>新闻内容</p>
        <p>图片内容</p>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var tabli = document.getElementsByTagName('li');
            var tabContent = document.getElementsByTagName('p');
            for(let i = 0; i< tabli.length; i++){
                // 绑定索引值
                tabli[i].onclick = function(){
                    // 点亮盒子
                    for(var j = 0; j<tabli.length; j++){
                        tabli[j].className = " ";
                        tabContent[j].className = " ";
                    }
                    this.className = 'active';
                    tabContent[i].className = 'active';
                }
            }
            }
    </script>
</body>
</html>
View Code

定时器的使用

js中定时器分为setTimeout（）和setInterval（）两种

setTimeOut():只在指定时间后执行一次

setInterval()：在指定时间周期循环执行

clearInterval(timer):将计时器停止，但是timer变量本身还存在

timer=null后，timer变量会被当做垃圾被系统回收，无法再次启动原来的timer

例：

做一个点击会向右移动的盒子

（整了老半天，没研究出来咋让它再移回去）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div >框子</div>

    <button >移动</button>
    <script type="text/javascript">

        var oApp = document.getElementById('app');
        var moveBtn = document.getElementById('move');
        
        var count = 0;
        var timer = null;
        moveBtn.onclick = function(){
            timer = setInterval(function(){
            count+=3;
            oApp.style.marginLeft = count + 'px';
        },50);
            
            }
          
    </script>
</body> 
</html>
View Code

相关推荐