美文网首页
2023-03-14_DOMDay02-排它思想开关思想以及鼠标

2023-03-14_DOMDay02-排它思想开关思想以及鼠标

作者: 远方的路_ | 来源:发表于2023-03-13 21:31 被阅读0次

    1. 操作多个元素的内容

    <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>02_排他思想-点击第一个li标签，然后将所有的li标签的内容修改为哈哈</title>
    </head>
    <body>
        <ul>
            <li>斗罗大陆</li>
            <li>斗破苍穹</li>
            <li>坏蛋是怎样练成</li>
            <li>上门龙婿</li>
        </ul>

        <script>
            // 1.获取所有的li
            // 2.从所有的li中找到第一个li
            // 3.点击第一个li
            // 4.将所有的li的内容修改为哈哈

            // 1.获取所有的li
            var li_list = document.querySelectorAll('ul li');

            // 2.从所有的li中找到第一个li
            // 3.点击第一个li
            li_list[0].onclick = function(){
                // 4.将所有的li的内容修改为哈哈
                //    a.遍历所有的li
                //    b.拿到li中间的内容
                //    c.修改
                for(var i = 0; i < li_list.length; i++){
                    li_list[i].innerHTML = '哈哈';
                }
            }

// 排他思想-点击任意一个li标签，然后将所有的li标签的内容修改为哈哈
for (var i = 0; i < li_list.length; i++) {
    li_list[i].onclick = function () {
         for (var j = 0; j < li_list.length; j++) {
             li_list[j].innerHTML = '哈哈'
         }
    }
}

// 排他思想-方法1-点击任意一个li-将当前点击的li修改为哈哈-其他li修改嘿嘿
for (var i = 0; i < liList.length; i++) {
    liList[i].onclick = function() {
        for(var j = 0; j < liList.length; j++) {
            liList[j].innerHTML = '嘿嘿'
        }
        this.innerHTML = '哈哈'
    }
}

// 排他思想-方法2-点击任意一个li-将当前点击的li修改为哈哈-其他li修改嘿嘿
for (var i = 0; i < liList.length; i++) {
    // 给li对象上添加一个属性  属性的名字叫做index
    // 属性的值是i
    liList[i].index = i;

    liList[i].onclick = function() {
        for(var j = 0; j < liList.length; j++) {
            liList[j].innerHTML = '嘿嘿'
        }
        liList[this.index].innerHTML = '哈哈'
    }
}
        </script>
    </body>
</html>

    排它思想:

    1. 先让所有的元素处于同样的状态

    2. 再让那个特殊的自己改变

    • 案例练习---排它思想-轮播小圆点切换
    <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>07_排他思想-轮播小圆点切换</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul li {
                list-style: none;
            }

            .uu::after {
                content: '';
                display: block;
                clear: both;
            }

            .uu li {
                width: 40px;
                height: 40px;
                background-color: gainsboro;
                border-radius: 50%;
                float: left;
                margin-right: 10px;
            }

            li.current {
                background-color: greenyellow;
            }
        </style>
    </head>
    <body>
        <ul class="uu">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <script>
            var li_list = document.querySelectorAll('.uu li');

            for(var i = 0; i < li_list.length; i++){
                li_list[i].onclick = function(){
                    for(var j = 0; j < li_list.length; j++){
                        li_list[j].style.backgroundColor = 'gainsboro';
                    }

                    this.style.backgroundColor = 'yellowgreen';
                }
            }
        </script>
    </body>
</html>

    2. 鼠标事件

    • onclick // 点击
    • ondblclick //双击
    • oncontextmenu //右击
    • onmousemove // 鼠标移动
    • onmouseover/onmouseout // 鼠标移入移出
    • nmouseenter/onmouseleave // 鼠标移入移出
    • onmousedown/onmouseup // 鼠标点击和抬起
    • 案例练习-风车案例
    <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>demo-风车案例</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul li{
                list-style: none;
            }
            .box {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 300px;
                height: 400px;
                background-color: red;
                }
            .box ul {
                width: 300px;
                height: 300px;
                animation: move 2s linear infinite;
            }
            @keyframes move {
                from{transform:rotate(0)}
                to{transform:rotate(360deg)}
            }
            .box ul li {
                float: left;
                width: 150px;
                height: 150px;
            }
            .box ul li:nth-child(1),.box ul li:nth-child(4){
                background-color: aqua;
                border-radius: 0 90% 0 90%;
            }
            .box ul li:nth-child(2),.box ul li:nth-child(3) {
                background-color: pink;
                border-radius:  90% 0 90% 0;
            }
            .box button {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul id="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <button>转/停</button>
        </div>
        <script>
            var ul = document.querySelector('#list')
            var btn = document.querySelector('button')
            var flag = true
            btn.onclick = function() {
                if(flag) {
                    ul.style.animationPlayState = 'paused';
                } else {
                    ul.style.animationPlayState = 'running';
                }
                flag = !flag
            }
        </script>
    </body>
</html>

    3. 开关思想

    <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>20_开关思想-显示隐藏</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: aqua;

                /* 元素隐藏方式 */
                /* display: none; 不占位 */
                /* visibility: hidden; 占位 */
                /* opacity: 0; 占位 */

                /* transform: translateX(10000px);占位 */
                /* transform: scale(0);占位 */
                /* transform: rotateY(90deg);占位 */
                /* transform: skew(90deg); */

                /* width: 0;占位 */
                /* height: 0;占位 */
            }
        </style>
    </head>
    <body>
        <div></div>
        <button>按钮</button>

        <script>
            var btn = document.querySelector('button');

            var div = document.querySelector('div');

            var flag = true;
            btn.onclick = function(){
                if(flag) {
                    div.style.visibility = 'hidden';
                }else {
                    div.style.visibility = 'visible';
                }
                flag = !flag;
            }
        </script>
    </body>
</html>

    4. 键盘事件

    • onkeyup // 按键抬起
    • onkeydown // 按键落下
    • onfocus // 获取焦点
    • onblur // 失去焦点

    4.1 onkeyup和onkeydown使用

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" />
        <!--键盘事件除了给表单类元素添加以外还能给document-->
        
        <script type="text/javascript">
            window.onload = function(){
                var inputNode = document.querySelector('input');
                
//              inputNode.onkeydown = function(){
//                  console.log('按下');//如果按下不放，那么这个按下事件是重复触发
//              }
                
                inputNode.onkeyup = function(){
                    console.log('抬起');//只会触发一次，用的比较多，可以保证事件函数只执行一次
                }
            }
        </script>
    </body>
</html>

    4.2 keycode键码

    案例: 如果输入的是回车则打印回车，如果输入的是shift那么就打印shift

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" />

        <script type="text/javascript">
            window.onload = function() {
                var inputNode = document.querySelector('input');

                inputNode.onkeyup = function(e) {
                    //与其说我们在讲键盘事件，不如说我们在讲怎么区分哪个键的事件
                    //区分哪个键，我们需要通过键码去区分
                    //键码在事件对象当中：每一个事件触发的时候都会有独立事件对象
                    //  事件对象就是回调函数的第一个参数，所有的事件触发的时候都会有这个对象
                    //  事件对象是一个对象，不是我们自己封装的对象，而是当触发事件的时候，系统会
                    //  自动的帮我们把和这一次触发事件相关的信息封装为 一个对象
                    //  系统会调用我们的回调函数，会把这个事件对象传给回调函数的第一个形参
                    //  console.log(e);
                    //如果是回车，那么就打印回车
                    if (e.keyCode === 13) {
                        console.log('回车')
                    } else if (e.keyCode === 16) {
                        console.log('shift')
                    }
                }
            }
        </script>
    </body>
</html>

    4.3 onfocus和onblur

    • onfocus获取焦点
    • onblur 失去焦点
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            input{
                outline: none;
            }   
        </style>
    </head>
    <body>
        <input type="text" value="老马大哥" />
        <script>
            //获取焦点的时候，input当中的值字体颜色为green  背景色为red  
            //失去焦点的时候，input当中的值字体颜色和背景色都随机变色（变色龙）
                var inputNode = document.querySelector('input');
                //获取焦点事件
                inputNode.onfocus = function() {
                    this.style.color = 'green';
                    this.style.backgroundColor = 'red';
                };
                //失去焦点事件.
                inputNode.onblur = function() {
                    //给字体颜色求的随机颜色
                    var red1 = Math.floor(Math.random() * 256);
                    var green1 = Math.floor(Math.random() * 256);
                    var blue1 = Math.floor(Math.random() * 256);
                    //给背景颜色求的随机颜色
                    var red2 = Math.floor(Math.random() * 256);
                    var green2 = Math.floor(Math.random() * 256);
                    var blue2 = Math.floor(Math.random() * 256);
                    //设置随机颜色
                    this.style.color = 'rgb(' + red1 + ',' + green1 + ',' + blue1 + ')';
                    this.style.backgroundColor = 'rgb(' + red2 + ',' + green2 + ',' + blue2 + ')';
                };
        </script>
    </body>
</html>
    • 案例练习-- 全选,全不选,反选
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="checkbox" id="c1"/>
        <label for="c1">抽烟</label>
        
        <label>
            <input type="checkbox" />喝酒
        </label>
        
        <label>
            <input type="checkbox" />烫头
        </label>
        
        <label>
            <input type="checkbox" />打豆豆
        </label>
        
        <br />      
        <button>全选</button>
        <button>全不选</button>
        <button>反选</button>
        
    <script>
        var btns = document.querySelectorAll('button');
        var inputNodes = document.querySelectorAll('input');
        //全选
        btns[0].onclick = function(){
            for(var i = 0; i < inputNodes.length; i++){
                inputNodes[i].checked = true;
                }
        }
        //全不选
        btns[1].onclick = function(){
            for(var i = 0; i < inputNodes.length; i++){
                inputNodes[i].checked = false;
            }
        }
        //反选
        btns[2].onclick = function(){
            for(var i = 0; i < inputNodes.length; i++){
                inputNodes[i].checked = !inputNodes[i].checked;
            }
        }
    </script>
    </body>
</html>
    • 案例练习---轮播的左右切换渐变效果
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            
            img{
                display: block;
                /*vertical-align: middle;*/
            }
            
            a{
                text-decoration: none;
            }
            
            input{
                outline: none;
            }
            
            .clearFix:after{
                content: '';
                display: table;
                clear: both;
            }
            
            #box{
                position: relative;
                width: 600px;
                height: 300px;
                margin: 50px auto;
                overflow: hidden;
            }
            
            #box .list{
                width: 3000px;
                height: 300px;
            }
            
            #box .list li{
                float: left;
                width: 600px;
                height: 300px;
            }
            
            #box .list li img{
                width: 600px;
                height: 300px;
            }
            
            #box span{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 50px;
                height: 100px;
                background-color: rgba(200,200,200,.7);
                font-size: 50px;
                text-align: center;
                line-height: 100px;
                color: white;
                opacity: 0;
                transition: opacity 2s;
            }
            #box .left{
                left: 0;
            }
            #box .right{
                right: 0;
            }
            
            #box .iconList{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
                overflow: hidden;
            }
            
            #box .iconList li{
                float: left;
                width: 40px;
                height: 40px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: gray;
            }
            
            #box .iconList li.current{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul class="list">
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"/></li>
            </ul>
            
            <span class="left">  <  </span>
            <span class="right">  >  </span>
            
            
            <ul class="iconList">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            var box = document.querySelector('#box');

            var span_list = document.querySelectorAll('#box span');

            box.onmouseenter = function(){
                span_list[0].style.opacity = '.7';
                span_list[1].style.opacity = '.7';
            }

            box.onmouseleave = function(){
                span_list[0].style.opacity = 0;
                span_list[1].style.opacity = 0;
            }
        </script>
    </body>
</html>
    • 案例练习---一级菜单联动二级菜单
    <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_案例练习-一级菜单联动二级菜单</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul li {
                list-style: none;
            }
            ul li a {
                text-decoration: none;
            }
            .list {
                position: relative;
                width: 200px;
                height: 210px;
                border: 1px solid #000;
                /* box-sizing: border-box; */
            }
            ul li {
                height: 70px;
                text-align: center;
                line-height: 70px;
                background-color: aquamarine;
            }
            .list > li:nth-child(2) {
                border-top: 1px solid #000;
                border-bottom: 1px solid #000;
                box-sizing: border-box;
            }
            ul li .listIn{
                display: none;
                position: absolute;
                left: 201px;
                top: -1px;
                border: 1px solid #000;
                width: 200px;
                height: 210px;
            }
        </style>
    </head>
    <body>
        <ul class="list">
            <li>
                <a href="javascript:;">手机</a>
                <ul class="listIn">
                    <li>苹果</li>
                    <li>华为</li>
                    <li>小米</li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">电脑</a>
                <ul class="listIn">
                    <li>宏碁</li>
                    <li>戴尔</li>
                    <li>联想</li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">汽车</a>
                <ul class="listIn">
                    <li>奔驰</li>
                    <li>奥迪</li>
                    <li>宝马</li>
                </ul>
            </li>
        </ul>
        <script>
            var list = document.querySelectorAll('.list > li')
            var listIn = document.querySelectorAll('.list > li .listIn')
            for(var i = 0; i < list.length; i++) {
                list[i].index = i;
                list[i].onmouseenter = function() {
                    listIn[this.index].style.display = 'block'
                }
                list[i].onmouseleave = function() {
                    listIn[this.index].style.display = 'none'
                }
            }
        </script>
    </body>
</html>

    相关文章

      网友评论

          本文标题：2023-03-14_DOMDay02-排它思想开关思想以及鼠标

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2023-03-14_DOMDay02-排它思想开关思想以及鼠标|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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