7.20案例和练习

最新推荐文章于 2024-07-23 12:35:43 发布

Modevol

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量59

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_41950754/article/details/125904361

版权

对象最大深度

 function getMaxLv(obj, currentLv, maxLv) {
    if (maxLv === undefined) maxLv = 1;
    if (currentLv === undefined) currentLv = 1;
    if (maxLv < currentLv) maxLv = currentLv;
    for (var key in obj) {
        if (typeof obj[key] === "object" && obj[key]!==null) {
            maxLv = getMaxLv(obj[key], currentLv + 1, maxLv);
        }
    }
    return maxLv;
}

秒表

<div id="div1">00:00:00</div>
    <button id="startBn">开始</button>
    <button id="stopBn">停止</button>
    <script>

        var div1,startBn,stopBn,startTime;
        var bool=false,
            prevTime=0;
        init();
        function init(){
            div1=document.getElementById("div1");
            startBn=document.getElementById("startBn");
            stopBn=document.getElementById("stopBn");
            startBn.onclick=clickHandler;
            stopBn.onclick=clickHandler;
            setInterval(animation,1);
        }

        function clickHandler(){
            if(this===startBn){
                if(startBn.innerHTML==="开始"){
                    startBn.innerHTML="暂停"
                    startTime=Date.now();
                    bool=true;
                }else{
                    startBn.innerHTML="开始";
                    bool=false;
                    prevTime+=Date.now()-startTime;
                }
            }else{
                div1.innerHTML="00:00:00";
                prevTime=0;
                bool=false;
                startBn.innerHTML="开始";
            }
        }

        function animation(){
            if(!bool) return;
            var num=Date.now()-startTime+prevTime;
            var str="";
            var m=(~~(num/1000/60));
            var s=~~((num-m*1000*60)/1000);
            str+=m.toString().padStart(2,0)+":";
            str+=s.toString().padStart(2,0)+":";
            str+=(~~((num%1000)/10)).toString().padStart(2,0);
            div1.innerHTML=str;
        }
    </script>

hash历史记录

 <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li{
            float: left;
            width: 120px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #000;
            border-left: none;
        }
        li:first-child
        {
            border-left: 1px solid #000;
        }
        .clear::after
        {
            content: "";
            clear: both;
            visibility: hidden;
            display: block;
            height: 0;
            overflow: hidden;
        }
        div{
            width: 1000px;
            height: 400px;
            border: 1px solid #000;
            margin-top: 10px;
        }
        a{
            text-decoration: none;
            color: #000;
            display: block;
            width: 100%;
            height: 100%;
        }

        
    </style>
</head>
<body>
    <ul class="clear">
        <li id="vegetable"><a href="#vegetable">蔬菜</a></li>
        <li id="fruit"><a href="#fruit">水果</a></li>
        <li id="meat"><a href="#meat">禽肉</a></li>
        <li id="oils"><a href="#oils">粮油</a></li>
    </ul>
    <div id="div1"></div>
    <script>
        var data={
            vegetable:["大白菜","青菜","白菜","茭白","莲花白","胡萝卜"],
            fruit:["苹果","香蕉","菠萝","鸭梨","西瓜","荔枝"],
            meat:["鸭肉","牛肉","猪肉","羊肉","鸡肉","鱼肉"],
            oils:["绿豆","大米","花生油","菜籽油","橄榄油","大豆"]
        }
        var div,prev;

        init();
        function init(){
            div=document.getElementById("div1");
            window.onhashchange=hashChangeHandler;
            if(!location.href.includes("#")) location.href+="#vegetable";
            hashChangeHandler();
        }


        function hashChangeHandler(){
            var arr=data[location.hash.slice(1)];
            div.innerHTML=arr.join(",");
            changePrev(document.getElementById(location.hash.slice(1)));
        }

        function changePrev(elem){
            if(prev){
                prev.style.backgroundColor="white";
            }
            prev=elem;
            prev.style.backgroundColor="red";
        }
    </script>

history记录

  <style>
         ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li{
            float: left;
            width: 120px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #000;
            border-left: none;
        }
        li:first-child
        {
            border-left: 1px solid #000;
        }
        .clear::after
        {
            content: "";
            clear: both;
            visibility: hidden;
            display: block;
            height: 0;
            overflow: hidden;
        }
        div{
            width: 1000px;
            height: 400px;
            border: 1px solid #000;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <ul class="clear">
        <li id="vegetable">蔬菜</li>
        <li id="fruit">水果</li>
        <li id="meat">禽肉</li>
        <li id="oils">粮油</li>
    </ul>
    <div id="div1"></div>

    <script>
        var data={
            vegetable:["大白菜","青菜","白菜","茭白","莲花白","胡萝卜"],
            fruit:["苹果","香蕉","菠萝","鸭梨","西瓜","荔枝"],
            meat:["鸭肉","牛肉","猪肉","羊肉","鸡肉","鱼肉"],
            oils:["绿豆","大米","花生油","菜籽油","橄榄油","大豆"]
        }

        var lis,div,prev;

        init();
        function init(){
            lis=Array.from(document.getElementsByTagName("li"));
            div=document.getElementById("div1");
            window.onpopstate=popstateHandler;
            for(var i=0;i<lis.length;i++){
                lis[i].onclick=clickHandler;
            }
            var li=history.state ? document.getElementById(history.state) : lis[0];
            history.replaceState(li.id,li.id);
            resetData(li);
        }

        function clickHandler(){
            history.pushState(this.id,this.id);
            resetData(this);//this被点击的li
        }

        function popstateHandler(){
            resetData(document.getElementById(history.state));
        }

        function resetData(li){
            div.innerHTML=data[li.id];
            changePrev(li);
        }
        function changePrev(li){
            if(prev){
                prev.style.backgroundColor="white";
            }
            prev=li;
            prev.style.backgroundColor="red";
        }
        
    </script>

深度遍历比较对象

    <script>
        function compareDeep(source, target, bool) {
            if (bool === undefined) bool = true;
            var keys = Object.keys(source);
            if (keys.length !== Object.keys(target).length) return false;
            for (var i = 0; i < keys.length; i++) {
                if (typeof source[keys[i]] === "object" && typeof target[keys[i]] === "object" && source[keys[i]] !==
                    null && target[keys[i]] !== null) {
                    bool = compareDeep(source[keys[i]], target[keys[i]], bool);
                } else {
                    if (source[keys[i]] !== target[keys[i]]) bool = false;
                }
            }
          
            return bool;
        }


        var obj = {
            a: 1,
            b: 2,
            c: {
                d: 3,
                e: 4,
                f: {
                    g: 5,
                    h: {}
                }
            }
        }
        var obj1 = {
            a: 1,
            b: 2,
            c: {
                d: 3,
                e: 4,
                f: {
                    g: 5,
                    h: null
                }
            }
        }

        var bool = compareDeep(obj, obj1);
        console.log(bool)

    </script>

多选实现

    <script>

        var inputs;

        init();
        function init(){
            inputs=[].concat.apply([],document.getElementsByTagName("input"));
            for(var i=0;i<inputs.length;i++){
                inputs[i].onclick=clickHandler;
            }
        }

        function clickHandler(){
            if(this.id==="all"){
            //    for(var i=0;i<inputs.slice(1).length;i++){
            //         inputs[i].checked=inputs[0].checked;
            //    }
                inputs.slice.forEach(function(item){
                    item.checked=this.checked;
                },this)
            }else{
                inputs[0].checked=inputs.slice(1).every(function(item){
                    return item.checked
                })
            }
        }

      
    </script>