BOM(一）

qqdef

已于 2022-03-08 13:50:55 修改

阅读量329

点赞数

于 2022-03-08 10:13:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45102392/article/details/123343960

版权

js 同时被 3 个专栏收录

11 篇文章

订阅专栏

html

3 篇文章

订阅专栏

css

3 篇文章

订阅专栏

1. // load 等页面内容全部加载完毕，包含页面dom元素图片flash css等等
// DOMContentLoaded 是DOM加载完毕，不包含图片falsh css等就可以执行加载速度比load更快一些

window . addEventListener( ' load', function() {
alert(22);
})
document . addEventListener( ' DOMContentLoaded'，function() {
alert(33);
})

2.onresize调整窗口大小事件

var div = document . querySelector( 'div' );
window . addEventListener(' resize'，function() {
console.1og('变化了');
if (window. innerWidth <= 800) {
div.style.display = 'none' ;
}
else{
div.style.display = 'block' ;
}
}//窗口小于800隐藏div

3 window. setTimeout(调用函数，延时时间)调用一次;window. setInterval(调用函数，延时时间)调用很多次;
//1.这个window在调用的时候可以省略
// 2.这个延时时间单位是毫秒但是可以省略，如果省略默认的是0

//第一种写法
setTimeout( function() {
console.1og('时间到了'); },2000) ;

//第二种写法
function callback() {
console.1og('爆炸了');
setTimeout(callback, 3000);

//页面中可能有很多的定时器，我们经常给定时器加标识符 (名字)
var time1=setTimeout(callback, 3000);
var time2=setTimeout(callback, 3000);

//五秒后自动隐藏图片
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad = document . querySelector( ' .ad' );
setTimeout( function() {
ad. style.display = ' none' ;
}, 5000);
<script>

4. clearTimeout (timeout ID)名字 clearInterval(timeout ID)名字停止计时器

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

在函数作用域中可以访问到全局作用域的变量,在函数外无法访问到函数作用域内的变量

在函数作用域中访问变量、函数时,会先在自身作用域中寻找,若没有找到,则会到函数的上一级作用域中寻找,一直到全局作用域（timer）

var begin = document . querySelector(' .begin' );
var stop = document . querySelector(' .stop');
var timer = null; //全局变量 nu11是一个空对象
begin. addEventListener( 'click', function() {
timer = setInterval(function() {
console.1og('ni hao ma ' );
}, 1000);
})
stop. addEventListener( 'click', function() {
clearInterval(timer);
})

5.倒计时动态的刷新不需要点刷新键

<style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>

    <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('2022-3-9 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 ); //时
            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>

6.发送短信

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        var a=document.querySelector('input')
        var b=document.querySelector('button')
        var t=3
        b.addEventListener('click', function(){    
            var time=setInterval(function(){
                 if(t==0){ 
                 b.innerHTML=('发送') 
                 b.disabled=false//这不能写this.disabled=false，此时this指向                                        
                                              // window,Window.setInterval
                 t=3
                 clearInterval(time)
            }
           else{
                 b.innerHTML=('请等待'+t+'秒')
                 b.disabled=true
                 t--
           }
            },1000)
        })
    </script>

7.5秒后跳转某页面 location.href = 'http://www.itcast.cn';

 <button>点击</button>
    <div></div>
    <script>
        var a=document.querySelector('button')
        var b=document.querySelector('div')
        var t=5
        a.addEventListener('click',function(){
            setInterval(function(){
                if(t==0){
             location.href = 'http://www.itcast.cn';  
                }
                else{
            b.innerHTML='还有'+t+'秒跳转页面'
            t--
                }
            },1000)
       
        })
    </script>

8.一个页面的信息在另一个页面显示

name 属性规定 <input> 元素的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。

注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

form绑定表单，action表示要将表单传递的地址

//注册页面
<body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

//登录页面
<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>

9.location.href需要写等于号，这种不需要

            // 记录浏览历史，所以可以实现后退功能
            location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            location.replace('http://www.itcast.cn');
            //刷新（ctrl+F5）强制刷新
            location.reload(true);

10. navigator.userAgent返回用户设备类型

        history对象方法
        back()可以后退功能
        forward()前进功能
        go(参数)前进后退功能参数如果是1前进1个页面如果是-1后退1个页面