js运动+全选反选+二级菜单dom操作的练习题

本文链接：https://blog.youkuaiyun.com/qq_54455551/article/details/124051994

本文展示了如何使用HTML、CSS和JavaScript实现动态的省份城市选择下拉菜单，以及图片轮播的动画效果。通过JavaScript处理DOM操作，实现了下拉菜单的联动，以及图片在切换时的平滑过渡。此外，还涵盖了全选、反选功能的实现，以及元素位置交换的缓冲动画。这些实例展示了JavaScript在网页交互和动画方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    省份:<select name="" id="province">
        <option value="" selected>---请选择---</option>
    </select>
    城市:<select name="" id="city"></select>
    <script>
        let json = [{
                province: "湖南",
                city: ["长沙市", "株洲市", "湘潭市"]
            },
            {
                province: "湖北",
                city: ["武汉市", "22市", "33市"]
            },
            {
                province: "四川",
                city: ["成都市", "44市", "55市"]
            },
            {
                province: "安徽",
                city: ["555市", "66市", "77市"]
            },
            {
                province: "海南",
                city: ["海口市", "88市", "99市"]
            },
        ]
        let province = document.getElementById("province")
        let city = document.getElementById("city")
        let frg = document.createDocumentFragment()
        json.forEach((v,index) => {
            let opt = document.createElement('option')
            opt.innerText = v.province
            opt.value = index
            frg.appendChild(opt)
        })
        province.appendChild(frg)

        let opt1 = Array.from(document.getElementsByTagName('option'))
        province.onchange = function () {
            let list = Array.from(city.children)
            list.forEach((value, index) => {
                value.remove()
            })
            json[this.value].city.forEach((v) => {
                let opt = document.createElement('option')
                opt.innerText = v
                frg.appendChild(opt)
            })
            city.appendChild(frg)

        }
    </script>
</body>

</html>

二级菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/css.css" />
    <style>
        .wrap {
            width: 1200px;
            margin: 100px auto;
        }

        .slide {
            height: 500px;
            position: relative;
        }

        .slide li {
            position: absolute;
            left: 200px;
            top: 0;
        }

        .slide li img {
            width: 100%;
        }

        .arrow {
            opacity: 0;
        }

        .prev,
        .next {
            width: 76px;
            height: 112px;
            position: absolute;
            top: 50%;
            margin-top: -56px;
            background: url("./images/prev.png") no-repeat;
            z-index: 99;
        }

        .next {
            right: 0;
            background-image: url("./images/next.png");
        }
    </style>
</head>

<body>
    <div class="wrap" id="wrap">
        <div class="slide" id="slide">
            <ul>
                <li><a href="#"><img src="images/slidepic1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic3.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic4.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic5.jpg" alt="" /></a></li>
            </ul>
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>
    <script src="./js/animatedPlus.js"></script>
    <script>
        var jsonData = [
            {   //  1
                width:400,
                top:20,
                left:50,
                opacity:0.2,
                zIndex:2
            },
            {  // 2
                width:600,
                top:70,
                left:0,
                opacity:.80,
                zIndex:3
            },
            {   // 3
                width:800,
                top:100,
                left:200,
                opacity:1,
                zIndex:4
            },
            {  // 4
                width:600,
                top:70,
                left:600,
                opacity:.80,
                zIndex:3
            },
            {   //5
                width:400,
                top:20,
                left:750,
                opacity:.20,
                zIndex:2
            }
        ];
        // 获取元素
        let slide = document.getElementsByClassName("slide")[0]
        let prev = document.getElementsByClassName("prev")[0]
        let next = document.getElementsByClassName("next")[0]
        let arrow = document.getElementById("arrow") 
        let lis = document.querySelectorAll("ul>li")
        // 鼠标移入显示箭头
        slide.onmouseover = function(){
            arrow.style.opacity = 1
        }
        slide.onmouseout = function(){
            arrow.style.opacity = 0
        }
        function arrayFor(){
            lis.forEach((li,index)=>{
                animated(li,jsonData[index],20)
            })
        }
        arrayFor()
        let i = 0
        // 左右切换
        prev.onclick = function(){
            jsonData.unshift(jsonData.pop())
            arrayFor()
        }
        next.onclick = function(){
            jsonData.push(jsonData.shift())
            arrayFor()
        }
    </script>
</body>

</html>

图片左右切换，左右箭头的显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" name="" id="checkAll">
    <label for="checkAll">全选</label>
    <input type="checkbox" name="" id="invertSelection">
    <label for="invertSelection">反选</label>
    <ul>
        <li><input type="checkbox" name="box" id="">小明</li>
        <li><input type="checkbox" name="box" id="">小花</li>
        <li><input type="checkbox" name="box" id="">小李</li>
        <li><input type="checkbox" name="box" id="">小鸟</li>
        <li><input type="checkbox" name="box" id="">小红</li>
    </ul>
    <script>
        let checkAll = document.querySelector('#checkAll')
        let invertSelection = document.querySelector('#invertSelection')
        let lis = Array.from(document.getElementsByName('box'))
        checkAll.onclick = function(){
            if(!checkAll.checked){
                lis.forEach((checkbox) => {
                    checkbox.checked = false
                })
            }else{
                lis.forEach((checkbox)=>{
                    checkbox.checked = true
                })
            }
        }
        invertSelection.onclick = function(){
            lis.forEach((checkbox)=>{
                if(checkbox.checked){
                    checkbox.checked = false
                }else{
                    checkbox.checked = true
                }
            })
        }
    </script>
</body>
</html>

全选按钮，反选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        div:nth-of-type(1){
            background-color: red;
            left: 0;
            top: 0;
        }
        div:nth-of-type(2){
            background-color: blue;
            left: 100px;
            top: 100px;
        }
        button{
            position: absolute;
            left: 150px;
            top: 0;
        }
    </style>
</head>
<body>
    <button>交换位置</button>
    <div></div>
    <div></div>
    <script src="./js/animatedPlus.js"></script>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            let divs = document.getElementsByTagName('div')
            let firstPoint = {"left":parseFloat(getStyle(divs[0],'left')),"top":parseFloat(getStyle(divs[0],'top'))}
            let lastPoint = {"left":parseFloat(getStyle(divs[1],'left')),"top":parseFloat(getStyle(divs[1],'top'))}
            animated(divs[0],lastPoint,200,function(){
                animated(divs[1],firstPoint,function(){
                    console.log('ok')
                })
            })
        }
    </script>
</body>
</html>

点击按钮，缓冲之后交换位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color:yellow;
            position: absolute;
        }
        .innerBox{
            position: absolute;
            background-color: blue;
            opacity: 0.1;
        }
    </style>
</head>
<body>
    <button>kaishi</button>
    <div class="box">
        <div class="innerBox"></div>
    </div>
    <script src="./js/animatedPlus.js"></script>
    <script>
        let btn = document.getElementsByTagName('button')[0]
        btn.onclick = function(){
            console.log("111")
            let innerBox = document.querySelector('.innerBox')
            innerBox.style.width = "100px"
            animated(innerBox,{"height":400,"zIndex":10,"left":400,"opacity":0.6},20,function(){
                animated(innerBox,{"width":500},20,function(){
                    console.log('ok')
                })
            },50)
        }
    </script>
</body>
</html>

点击按钮，出现一个box让它的宽为100px，高逐渐变为400px，opacity从0.1变为0.6，达到黄框的右边后将其宽变为400px

封装的运动js代码为

    //方法封装
    function animated(element,targetObject,speed = 0,callback){//element 变化的元素  传入目标对象 targetObject callback 回调函数
        clearInterval(element.timer)
        if(typeof speed != "number"){
            speed = Number(speed)
            if(isNaN(speed)){
                speed = 0
            }
        }
        //遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
        element.timer = setInterval(()=>{
            let flag = true 
            for(let key in targetObject){
              let current = parseFloat(getStyle(element,key))
              let step = 0
              //判断传进来的值
              if(key=="opacity"){
                  //不需要px作为单位
                  //目标元素 targetObject[key]  当前的值 Number(getStyle(element,key)) 步长 
                //   if((targetObject[key]*100-current*100)>0){
                //     step = 0.004
                //   }else{
                //       step = -0.004
                //   }
                  step = (targetObject[key] * 100 - current * 100) / 10 //保证最终达到1  
                  step = (step > 0 ? Math.ceil(step) : Math.floor(step)) / 100
                  element.style[key] = current + step
              }
              if(key=="zIndex"){//如果是层高 直接设置
                 element.style[key] = targetObject[key]
              }
              if(key!="opacity" && key!="zIndex"){ //height width left top
                step = (targetObject[key]-current)/10>0?Math.ceil((targetObject[key]-current)/10):Math.floor((targetObject[key]-current)/10)
                element.style[key] = current+step+'px'
              }
              if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完
                    flag = false
              }
            }
            if(flag){
                clearInterval(element.timer)
                //执行对应的callback
                if(typeof callback =='function'){//如果你是个函数
                    //执行这个函数
                    callback()
                }
            }
        },speed)
        //callback是所有的这个函数里面所有的事情做完以后做的事情
    }
    //获取样式的值
    function getStyle(element,attr){ //需要获取样式的对象  样式的名字
        // window.getComputedStyle(element,null)[attr]
        // element.currentStyle ie的兼容写法
        //获取样式对象
        var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle
        return style[attr]
    }
    // 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离
    function myScoll(){
        //如果没有滚动栏
        if(window.pageYOffset!=null){
            return {"left":window.pageXOffset,"top":window.pageYOffset}
        }
        //获取top值
        let top = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop
        //获取left值
        let left = document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft
        //再返回
        return {left,top}
    }