Javascript学习笔记----10BOM

提供与浏览器窗口交互的对象 

window.οnlοad=function(){}   ----有了这个可以把js代码放在页面任何一个地方（只能写一个）

window.addEventListener(‘load’，function（）{})    ---等页面内容全部加载完毕

document.addEventListener('DOMContentLoaded' ,function(){})   ---DOM加载完毕，不包含图片等 

1.调整窗口大小

window.οnresize=function(){}

(只要窗口大小发生变化，就会发生这个事件)

2.定时器

window.setTimeout(调用函数--可以直接写函数也可以写函数名，【延迟的毫秒数】） 回调函数

---在定时器到期后执行调用函数

---window可以省略

---可以用var 给定时器取名字来区分

停止定时器：window.clearTimeout(定时器名字)

反复调用定时器：window.setInterval()

倒计时实例！！！

<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("2023-12-18 21:00:00");//返回的是用户输入时间总的毫秒数
        //2.开启定时器
        countDown();
        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; 
            console.log(s);
        }
    </script>

效果图：

js执行机制

同步任务---按顺序执行   （主车道）

异步任务---可以同时执行    （应急车道）

location.href  ---获得url地址

一个页面值传到另一个页面案例

login.html:

<form action="index.html">
        用户名：<input type="text" name="uname">
        <button>登录</button>
    </form>
       

index.html:

 <div >
    </div>
    <script>
        //1.先去掉？  substr('起始的位置'，截取几个字符)
        var params=location.search.substr(1);
        //2.利用=把字符串分割成数组
        var arr=params.split('=');
        //3.把数据写入div中
        var divs = document.querySelector('div');
        divs.innerHTML=arr[1];   
    </script>

location对象其他方法：

history对象方法：