js-BOM概述以及定时器相关案例

最新推荐文章于 2023-05-17 22:46:33 发布

黑马金牌编程

最新推荐文章于 2023-05-17 22:46:33 发布

阅读量621

点赞数 1

分类专栏：前端web开发文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/gyqailxj/article/details/122619524

版权

前端web开发专栏收录该内容

48 篇文章 6 订阅

订阅专栏

1.BOM概述

1.1什么是BOM

在这里插入图片描述

1.2BOM的构成

BOM比DOM更大，包含DOM

在这里插入图片描述

3.定时器

3.2setTimeout()定时器

在这里插入图片描述

案例：5秒后自动关闭的广告

分析：
5秒之后，就把这个广告隐藏起来
用定时器setTimeout

<body>
    <img src="1.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function(){
            ad.style.display = 'none';
        },5000);
    </script>
</body>

3.3停止setTimeout()定时器

在这里插入图片描述

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function(){
            console.log('爆炸了');
        },5000);
        btn.addEventListener('click',function(){
                clearTimeout(timer);
           
        })
    </script>
</body>

3.定时器

案例：发送短信案例
点击按钮后，该按钮60秒内不能再次点击，防止重复发送短信
在这里插入图片描述

分析：
在这里插入图片描述

<body>
    手机号码：<input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 60;//定义剩下的秒数
        btn.addEventListener('click',function(){
            btn.disabled = true;
            var timer = setInterval(function(){
                if(timer == 0){
                    //清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 60;//这个3需要从新开始
                }else{
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            },1000);
        })
    </script>
</body>

5.location对象

案例：5秒后跳转页面
分析：
在这里插入图片描述

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button',);
        var div = document.querySelector('div');
        btn.addEventListener('click',function(){
            location.href = 'http:www.baidu.com';
        })
        var timer = 5;
        setInterval(function(){
            if(timer == 0){
                location.href = 'http:www.baidu.com';
            }else{
                div.innerHTML = '您将在'+ timer +'秒钟之后跳转到页面';
                timer--;
            }
           
        },1000);    
    </script>
</body>

动画函数封装

动画实现原理

在这里插入图片描述

 <style>
        div{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = setInterval(function(){
            if(div.offsetLeft >= 400){
                //停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        },30);
    </script>

动画函数简单封装

注意函数需要传递2个参数，动画对象和移动到的距离

 <style>
        div{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span{
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div></div>
    <span>秋天</span>
    <script>
        //简单动画函数封装
       function animate(obj,target){
            var timer = setInterval(function(){
                if(obj.offsetLeft >= target){
                //停止动画  本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            },30);
       }
       var div = document.querySelector('div');
       var span = document.querySelector('span');
       //调用函数
       animate(div,300);
       animate(span,200);
    </script>

记住用户名

在这里插入图片描述

<body>
    <input type="text" id="username"> <input type="checkbox" name="" id="remember">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if(localStorage.getItem('username')){
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        remember.addEventListener('chang',function(){
            if(this.checked){
                localStorage.setItem('username',username.value)
            }else{
                localStorage.removeItem('username');
            }
        })
    </script>