WEB_BOM笔记

　　1.resize

　　　　// resize 调整窗口大小执行

　　 // innerWidth 返回浏览器窗口的大小

　　2.setTimeOut(function(){},time);

　　　　例如

  <script>  
/*  
        代码延迟执行：
            元素.setTimeOt(function(){

            },1000);
    */
    var items = setTimeout(function (){
        console.log('hello world')
    }, 3000);
    
    document.querySelector('button').onclick = function(){
        clearTimeout(items);  // 暂停定时器
    }
</script>

　　3.setInterval(function(){},time);

　　　　例如：

<script>
    /*
        setInterval 循环定时器
        setInterval(function(){},1000)
    */
    var items;
    var btn = document.querySelector('button');
    btn[0].onclick = function(){
        items = setInterval(function(){
            console.log('循环执行');
        },1000)
    }

    btn[1].onclick = function(){
        clearInterval(items);
    }
</script>

　　4.location

<script type="text/javascript">
            /* 
                assign()     
                    用来跳转到其他的页面，作用和直接修改Location一样
                
                reload()
                    用于重新加载当前页面，作用和刷新按钮一样
                    如果在方法中传递一个true 作为参数，则会强制清空缓存刷新页面
                
                replace() 
                    可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
                        不会生成历史记录，不能使用history.back按钮
             */
        </script>
　　//例如

<body>
    <div>您将在<span>5</span>的时候跳转到蛋炒饭</div>
</body>
<script>
    // console.log(location);

    // setTimeout(function(){
    //     location.href="http://蛋炒饭.cc"
    // },5000)
        var osp = document.querySelector('span');
        var num = 5;
        setInterval(function(){
            num--;
            if(num === 0){
                location.href="http://蛋炒饭.cc";
                return false;
            }else{
                osp.innerText = num;
            }
        },1000)
    
</script>

5.定时器例子：

<body>
    <h2></h2>
</body>
    <script>
        var h2 = document.querySelector('h2');
        function time(){
            var nowTime = new Date();// 开始时间
            var endTime = new Date('2020-10-1');// 最终时间

            var count = (endTime.getTime() - nowTime.getTime()) / 1000;//这个时间就是秒

            var day = parseInt(count / (24*60*60)); // 计算出剩余的天数
            var hours = parseInt(count / (60*60) % 24);// 计算出剩余的小时
            var minute = parseInt(count / 60 % 60);// 计算出剩余的分钟
            var second = parseInt(count % 60);// 计算出剩余的秒

            h2.innerHTML = '距离10月1号还剩余'+day+'天'+hours+'小时'+minute+'分钟'+second+'秒';
        }

        setInterval(time, 1000);
    </script>

WEB_BOM笔记

推荐阅读