1121作业

ohhiya

已于 2024-01-30 13:10:57 修改

阅读量344

点赞数 8

分类专栏： 4A 文章标签： javascript 前端 html

于 2024-01-30 12:28:58 首次发布

本文链接：https://blog.csdn.net/2202_75526478/article/details/135930210

版权

4A 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

获取鼠标指针位置

 <style>
        .mouse{ 
            position: absolute;
            background-color: #ffd965;
            width: 48px;
            height: 48px;
            border-radius: 24px;
        }
    </style>
</head>

<body>
    <div id="div" class="mouse"></div>
    <script>
        var div = document.getElementById('div');
        document.onclick = function(event){
            var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
            var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
            //计算div的显示位置
            var targetX = pageX - div.offsetWidth/2;
            var targetY = pageY - div.offsetHeight/2;
            // 设置div的位置并让它显示
            div.style.display = "block";
            div.style.left = targetX + 'px';
            div.style.top = targetY + 'px';
        };
    </script>
</body>

事件注册按钮

<body>
    <button id="btn1">天干</button><br>
    <button id="btn2">地支</button>
    <script>
        document.getElementById("btn1").addEventListener("click",function(){
            alert("甲乙丙丁戊己壬葵")
        });
        document.getElementById("btn2").addEventListener("click",function(){
            alert("子丑寅卯辰巳午未申酉戌亥")
        });
    </script>
</body>

鼠标拖拽效果

 <style>
        #box {
            padding: auto;
            background-color: aqua;
            height: 48px;
        }
    </style>
</head>
<body>
    <div class="dialog" id="box">
        <div class="dialog-title" id="drop">
            <span>注册信息（可以拖拽）</span>
            <div class="dialog-close" id="close">x</div>
        </div>
        <div class="dialog-body"></div>
    </div>
    <script>
        var box = document.getElementById('box');
        var drop = document.getElementById('drop');
        //鼠标按下时开启鼠标拖拽效果
        drop.onmousedown = function(e){
            //计算鼠标指针在div元素内的位置
            var spaceX = e.pageX - box.offsetLeft;
            var spaceY = e.pageY - box.offsetTop;
            // 让div元素跟随鼠标指针移动
            document.onmousemove = function(e){
                // 设置div元素移动后的位置
                box.style.left = e.pageX - spaceX + 'px';
                box.style.top = e.pageY - spaceY + 'px';
            };
        };
        // 鼠标释放时取消鼠标拖拽效果
        document.onmouseup = function(){
            document.onmousemove = null;
        };
        // 单击右上角的关闭按钮可关闭对话框
        document.getElementById('close').onclick = function(){
            box.style.display = 'none';
        };
    </script>
</body>

文本内容显示隐藏

<body>
    <input type="text" value="手机" style="color: #999;">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function(){    //注册获得焦点事件focus
            if(this.value === '手机'){
                this.value = '';
            }
            this.style.color = '#444';
        };
        text.onblur = function(){   //注册失去焦点事件blur
            if(this.value === ''){
                this.value = '手机';
            }
            this.style.color = '#999';   //失去焦点需要把文本框里面的文字颜色变浅
        };
    </script>
</body>

下拉菜单

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: #000;
        }
        
        ul {
            list-style: none;
        }
        
        .nav {
            text-align: center;
            overflow: hidden;
        }
        
        .nav>li {
            float: left;
        }
        
        .nav>li>a {
            border: 1px solid rgb(199, 186, 6);
            display: block;
            width: 130px;
        }
        
        .nav ul {
            background-color: rgb(199, 186, 6);
            line-height: 30px;
            display: none;
        }
        
        .nav ul>li:hover {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="content">
        <ul class="nav">
            <li>
                <a href="#">突击步枪</a>
                <ul>
                    <li><a href="#">M416</a></li>
                    <li><a href="#">SCAR-L</a></li>
                    <li><a href="#">G36C</a></li>
                    <li><a href="#">AUG</a></li>
                </ul>
            </li>
            <li>
                <a href="#">冲锋枪</a>
                <ul>
                    <li><a href="#">UMP45</a></li>
                    <li><a href="#">野牛</a></li>
                    <li><a href="#">汤姆逊</a></li>
                    <li><a href="#">UZI</a></li>
                </ul>
            </li>
            <li>
                <a href="#">栓动狙击</a>
                <ul>
                    <li><a href="#">Kar98K</a></li>
                    <li><a href="#">AWM</a></li>
                    <li><a href="#">M24</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        // 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children;
        console.log(nav);
        // 循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block'; //里面的ul是他的第二个孩子
            }
            lis[i].onmouseleave = function() {
                this.children[1].style.display = 'none'; //里面的ul是他的第二个孩子
            }
        }
    </script>
</body>

Event事件冒泡：鼠标跟随

 <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            text-align: center;
            color:brown;
            border-radius: 30%;
            position: absolute;
        }
        #box2{
            width: 400px;
            height: 400px;
            background-color:beige;
            border-radius: 20%;
        }
    </style>
</head>

<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <script>
        let box1 = document.getElementById("box1");
        let box2 = document.getElementById("box2");
        let body = document.querySelector("body");
        document.addEventListener('mousemove',(e)=>{
            console.log(e.clientX,e.clientY);
            box1.style.left = e.x+'px';
            box2.style.top = e.y+'px';
        })
        box2.addEventListener('mousemove',(e)=>{
            e.stopPropagation()
        })
    </script>
    
</body>