js-BOM 基础

最新推荐文章于 2024-05-12 23:24:04 发布

@LitterFisher

最新推荐文章于 2024-05-12 23:24:04 发布

阅读量42

点赞数

分类专栏： html-css-js 文章标签： js

本文链接：https://blog.csdn.net/weixin_44002250/article/details/119678432

版权

html-css-js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

HTML-BOM 浏览器对象模型由一系列对象构成缺乏标准
顶级对象 window 定义在全局作用域的变量函数都会变成window对象的属性和方法
包含 dengdeng

document
location
navigation
screen
history

常见事件

事件	语义
onload	窗口页面加载事件当文档内容完全加载完成（包括图片 js css）触发该事件注意：只能写一个多了以最后一个为准但以addEventListener 不收限制
DOMContentLoaded	当文档加载完成但不包括 .css 图片 flash 等 ie9以上
resize	浏览器大小发生变化触发

<script>
   window.addEventListener('load',function () {
       alert(233);
   })

   window.addEventListener('DOMContentLoaded',function () {
       alert(234)

   })
   window.addEventListener('resize',function () {
       console.log(11)
   })
</script>

定时器

定时器	语义
window.setTimeout(fn,[延迟的毫秒数])	到点触发，用途广告
window.clearTimeout(timeout ID)	停止计时器
window.setInterval(fn,[延迟的毫秒数])	每隔一段时间执行回调函数
window.clearInterval(timeout ID)	停止计时器

计时器

<head>
    <meta charset="UTF-8">
    <title>计时器</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .p {
            width: 200px;
            height: 100px;
            margin: 0 auto;
            border: 1px solid;
            text-align: center;
        }
        span {
            margin: 0 3px;
            display: inline-block;
            width: 30px;
            background-color: #2aabd2;
        }
    </style>
</head>
<body>
<div class="p">
    <h3>倒计时</h3>
    <br>
    <span class="hour">01</span>:
    <span class="minute">02</span>:
    <span class="second">03</span>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var inputTime = +new Date('2021-8-13 21:00:00');
        countTime(inputTime);
        setInterval(function () {
            countTime(inputTime);
        },1000)

        function countTime(inputTime){
            var now = new Date();//当前时间总豪秒数

            var times = (inputTime-now) / 1000;

            var h = parseInt(times / 60 / 60 % 24);
            h = h <10 ? '0' + h : h;

            var m = parseInt(times / 60 % 60);
            m = m <10 ? '0' + m : m;

            var s = parseInt(times % 60);
            s = s <10 ? '0' + s : s;

            hour.innerHTML = h;
            minute.innerHTML  = m;
            second.innerHTML = s;
        }
    </script>
</div>
</body>

发短信记时

<input type="number">
<button>发送</button>
<script>
    var count = 60;
    var btn = document.querySelector('button');
    btn.addEventListener('click',function () {
        btn.disabled = true;
        var timer = setInterval(function () {
            if(count == 0){
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML='发送';
                count = 60;
            } else {
                btn.innerHTML = '还剩下'+count + '秒';
                count--;
            }
        },1000)
    })
</script>

js同步异步执行机制
js 原本是单线程 now
把同步任务放在执行栈队列先执行，把回调函数等放在任务队列执行栈执行后运行任务队列
location 对象

属性	语义
href	获取或设置整个url
host	返回主机（域名）
port	返回端口号
pathname	返回路径
search	返回参数
hash	返回片段 #后面的内容

方法	语义
assign(‘url’)	跳转页面记录浏览历史，可以实现后退功能
replace	跳转页面不记录浏览历史
reload(true)	重新加载页面 f5 true强制刷新相当于 ctrl+f5

navigator 对象
常用use-agent
history 对象

方法	语义
back()	后退功能
forward()	前进功能
go(参数）	前进后退功能 1 前进1个页面后退一个页面

@LitterFisher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-BOM 基础

HTML-BOM 浏览器对象模型由一系列对象构成缺乏标准顶级对象 window 定义在全局作用域的变量函数都会变成window对象的属性和方法包含 dengdengdocumentlocationnavigationscreenhistory常见事件事件语义onload窗口页面加载事件当文档内容完全加载完成（包括图片 js css）触发该事件注意：只能写一个多了以最后一个为准但以addEventListener 不收限制DOMConten
复制链接

扫一扫