Dom实操(第二十一课)

Dom实操(第二十一课)

本文内容 代码实战 下面三个案例如果是你你会如何实现 博主只提供JavaScript的代码 样式需要各位自己去思考如何做

案例一  

下面图的效果 如何实现

 

案例二

下面图的效果 如何实现

案例三

下面图的效果 如何实现

 

案例一

 //委托事件
  var listel=document.querySelector("ul")
  console.log(listel)
 //  绑定事件
     listel.onclick=function(e){
         // 判断改变的元素
         var nowEl=e.target
         // 定义高亮元素
         var activeml=null
         if(nowEl!=this){
             if(!nowEl.classList.contains("item")){
                 nowEl=e.target.parentElement 
             }
         if(activeml) activeml.classList.remove("active")
         nowEl.classList.add("active")
         activeml=nowEl
         }
         }

案例二

   // 获取ul
   var ulEl = document.querySelector("ul")
   // 获取到当前高亮的元素
   var activeEl = ulEl.children[0]
   var flag = false
   // console.log(activeEl);
   // 绑定鼠标移入事件
   ulEl.onmouseover = function (e) {
       // 判断是否点击的是li元素
       if (e.target !== this) {
           // 是否有高亮，有就删除
           if (activeEl) activeEl.classList.remove("active")
           // 给当前移入的元素添加高亮
           e.target.classList.add("active")
           var spanEl = e.target.firstElementChild
           if (spanEl) spanEl.style.transform = `rotate(-180deg)`
           // 赋值给下一次需要删除的高亮元素
           activeEl = e.target
       }
   }
   ulEl.onclick = function (e) {
       // 判断是否点击的是li元素
       if (e.target !== this) {
           // 是否有高亮，有就删除
           if (activeEl) activeEl.classList.remove("active")
           // 给当前移入的元素添加高亮
           e.target.classList.add("actives")
           var spanEl = e.target.firstElementChild
           if (spanEl) spanEl.style.transform = `rotate(-270deg)`
           // 赋值给下一次需要删除的高亮元素
           activeEl = e.target
       }
   }
   // 给li绑定移出事件
   ulEl.onmouseout = function (e) {
       var spanEl = e.target.firstElementChild
       if (e.target.tagName === "LI") {
           if (spanEl) spanEl.style.transform = `rotate(0deg)`
       }
   }

案例三

//!利用函数来封装
/**
 * @FistComOn 函数的起始位置
 */
function FistComOn() {
    confirm("开始我们的第一个案例侧边栏")
}
/**
 * @AutomaticExecutionFunction 自动执行函数
 */
function AutomaticExecutionFunction() {
    // 调用程序开始
    FistComOn()
    //!第一步 获取元素将图片显示到div中去
    var Gainicon = document.getElementsByClassName("icon")
    //! 控制台打印测试信息  console.log(Gainicon)
    //! 第二步打印遍历元素
    //!普通的for循环 方案一
    // for (var i = 0; i < Gainicon.length; i++) {
        // !方案二 
        for (let i = 0; i < Gainicon.length; i++) {
        //! 控制台打印出获取的元素的长度 console.log(Gainicon.length)
        //! 控制台打印出获取的元素的长度中的单个元素的div console.log(Gainicon[i])
        //! 第三步声明一个变量将上面获取到的单个元素赋值给变量
        var obtain = Gainicon[i]
        //! 在新的变量中获取的元素的长度中的单个元素的div  console.log(obtai
        //!第四步改变样式
        // !方案一的写法
        // obtain.style.backgroundImage=`url("../img/${i+1}.svg")`
        // !方案二的写法  也可以不去声明变量下面的方案只要看的懂也可以
        Gainicon[i].style.backgroundImage = `url("../img/${i + 1}.svg")`
        //!完成了第一个小功能将图片展示到页面上去了
    }
    //!第五步获取元素的最大的盒子元素
    var BigTool = document.querySelector(".tool-bar")
    //! 打印内容信息测试 console.log(BigTool)
    //!获取这个元素后先写出移入移出的事件 要完成的功能可以在去去定义
    /**
     * @onmouseover 移入事件
     * @onmouseout 移出事件
     * @OnmouseoverAndOnmouseOutAll 当用户移入移出时改变的参数
     * 
     * @param {*} e 
     */
    BigTool.onmouseover = function (e) {
        OnmouseoverAndOnmouseOutAll(e, 62)

    }

    BigTool.onmouseout = function (e) {
        OnmouseoverAndOnmouseOutAll(e, 0)
    }

    // ! 第六步定义函完成功能将宽度改变
    function OnmouseoverAndOnmouseOutAll(e, width) {
        //!第七步思考一下 e.target!==e.currentTarget 这啥意思呀！我不知道那可以去控制台打印呀
        //!获取当前的鼠标移入移出的元素 console.log(e.target)
        //!!获取当前的鼠标移入移出的父元素tool-bar console.log(e.currentTarge
        // !如果你获取的是元素等于自己的父亲元素有意义吗？所以加上非等于
        if (e.target !== e.currentTarget) {
            //!我是要给父元素增加高度吗？我是不是要个子元素的item增加高度呀
            // if (e.target.classList.contains("item")) {
            //* console.log(e.target.classList.contains("item"))  当这个条件为true又去执行函数 我是不是可以写三元表达式呀
            // e.target.children[0].style.width = `${width}px`

            // } else {
            // e.target.parentElement.children[1].style.width = `${width}px`

            // }

            
            //! 思维扩展三元表达式
            (e.target.classList.contains("item")) ? a() : b();
            function a() {
                e.target.children[0].style.width = `${width}px`

            }
            function b() {
                e.target.parentElement.children[1].style.width = `${width}px`
            }




        }




    }




}

AutomaticExecutionFunction()