3.BOM对象学习

最新推荐文章于 2024-07-04 00:59:27 发布

qq_41603622

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量652

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_41603622/article/details/121292140

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

BOM对象

1.浏览器对象模型

2.window对象的常见事件定时器

1.setTimeout 语法规范： window.setTimeout(调用函数, 延时时间);
2. setInterval 语法规范： window.setInterval(调用函数, 间隔毫秒数);

倒计时效果(输入时间到当前时间的长倒计时);

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-10-26 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

定时器效果(用于页面剩余多少秒跳转效果);

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var but = document.querySelector('button');
        var time = 3; // 定义剩下的秒数

        but.addEventListener('click',function() {
            but.disabled = true; //点击后禁用按钮
            var timer = setInterval(function(){
                if(time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    but.disabled = false;
                    but.innerHTML = '发送';
                    time = 3; //这个定时器重新开始
                } else {
                    but.innerHTML = '还剩余'+time+'秒';
                    time--;
                }
            },1000)
        })
    </script>
</body>

3.JS执行机制

同步和异步：同步就是同时执行,类似于多线程;异步就排队执行,类似于单线程;

注意:同步任务先执行完,异步任务后执行，所有回调函数都是异步任务

4.location 对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

location.href：获取或者设置整个URL;

location.search：返回参数

五秒钟之后自动跳转页面

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

        }, 1000);
    </script>
</body>

5.navigator 对象

6.history 对象

history.forward()：页面前进跳转(保存url);

history.back()：页面后退(保存url)

qq_41603622

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.BOM对象学习

BOM对象1.浏览器对象模型2.window对象的常见事件定时器1.setTimeout 语法规范： window.setTimeout(调用函数, 延时时间);2. setInterval 语法规范： window.setInterval(调用函数, 间隔毫秒数);倒计时效果(输入时间到当前时间的长倒计时);<body> <div> <span class="hour">1</span> &lt
复制链接

扫一扫