JavaScript-BOM-CFANZ编程社区

BOM

1、DOM和BOM的区别

2、窗口加载事件

3、调整窗口大小隐藏div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
<script>
    window.addEventListener('load',function () {
        let div = document.querySelector('div');
        window.addEventListener('resize',function () {
            if (window.innerWidth <= 800){
                div.style.display = 'none';
            }else {
                div.style.display = 'block';
            }
        })
    })
</script>

<div></div>
</body>
</html>

4、定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //格式：window.setTimeout(调用函数，延迟的毫秒数);
    //setTimeout()方法用于设置一个定时器，该定时器在到期后执行调用函数

    // 注意：
    // 1、window可以省略
    // 2、这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式
    // 3、延迟的毫秒数省略默认是0，如果写，必须是毫秒
    // 4、因为定时器可能有很多，所以我们检查给定时器赋值一个标识符

    let time1 = setTimeout(function () {
        console.log("我是第三秒执行的")
    },3000)
    let time2 = setTimeout(fn2,5000)
    function fn2() {
        console.log("我是第五秒执行的");
    }
</script>
</body>
</html>

5、三秒后自动关闭广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            margin: 0px;
            position: absolute;
            background-color: pink;
            width: 100%;
            height: 200px;
        }
        #gg{
            position: relative;
            margin: 65px auto;
            text-align: center;
            font-size: 40px;
        }
        #x{
            width: 27px;
            height: 27px;
            position: absolute;
            right: 10px;
            font-size: 20px;
            text-align: center;
            cursor: pointer;
            background-color: #ac59ac;
        }
    </style>
</head>
<body>
<div class="box">
    <div id="x">x</div>
    <div id="gg"><span>我是广告（我三秒后自动关闭）</span></div>
</div>

<script>
    let box = document.querySelector('.box');
    let x = document.getElementById('x');
    x.onclick = function () {
        box.style.display = 'none';
    }
    setTimeout(function () {
        box.style.display = 'none';
    },3000)
</script>

</body>
</html>

6、清除定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点一下我就停止弹窗事件</button>
<script>
    let btn = document.querySelector('button');
    let timer = setTimeout(function () {
        alert("boom");
    },3000)
    btn.addEventListener('click',function () {
        clearTimeout(timer);
    })
</script>
</body>
</html>

7、setInterval()定时器

8、动态倒计时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>
</head>

<body>
<div>
    <span class="day">1</span>
    <span class="hour">2</span>
    <span class="minute">3</span>
    <span class="second">4</span>
</div>
<script>
    let days = document.querySelector('.day');
    let hours = document.querySelector('.hour');
    let minutes = document.querySelector('.minute');
    let seconds = document.querySelector('.second');
    let tt = prompt("请输入结束时间（xxxx-xx-xx xx:xx:xx）");
    countDown();
    console.log(tt);
    setInterval(countDown,1000);
    function countDown(time) {
        let nowTime = +new Date();  //返回的是当前时间总的毫秒数
        let inputTime = +new Date(tt); //返回的是当前用户输入时间的总的毫秒数
        let times = (inputTime - nowTime) / 1000; //times是剩余时间的总秒数
        let d = parseInt(times / 60 / 60 / 24); //天
        d = d < 10 ? '0'+d : d;
        days.innerHTML = d;
        let h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0'+h : h;
        hours.innerHTML = h;
        let m = parseInt(times / 60 % 60); //分
        m = m < 10 ? '0'+m : m;
        minutes.innerHTML = m;
        let s = parseInt(times % 60); //秒
        s = s < 10 ? '0'+s : s;
        seconds.innerHTML = s;
    }

</script>
</body>

</html>

9、开启和清除定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="up">开启定时器</button>
    <button class="down">关闭定时器</button>

    <script>
        let up = document.querySelector('.up');
        let down = document.querySelector('.down');
        let timer = null;
        up.addEventListener('click',function () {
            timer= setInterval(function () {
                console.log('1111');
            },1000)
        })
        down.addEventListener('click',function () {
            clearInterval(timer);
        })
    </script>
</body>
</html>

10、发送短信案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button class="btn">发送</button>

<script>
    let ipt = document.querySelector('input');
    let btn = document.querySelector('button');
    let timer = null;
    let num = 5;
    btn.addEventListener('click',function () {
        timer =  setInterval(function () {
            if (num === 0) {
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                num = 5;
            }else {
                btn.disabled = true;
                btn.innerHTML = '请'+num+'秒后再发送';
                num--;
            }
        },1000)
    })

</script>
</body>
</html>

11、URL（location对象）

12、五秒后自动跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>跳转</button>
<div></div>
<script>
    let div = document.querySelector('div');
    let btn = document.querySelector('button');
    let num = 5;
    btn.addEventListener('click',function () {
        location.href = 'http://www.cnblogs.com/xiaoebaba'
    })
    setInterval(function () {
            if (num === 0){
                location.href = 'http://www.cnblogs.com/xiaoebaba';
            }else {
                div.innerHTML = "页面将在"+num+"秒内跳转到首页";
                num--;
            }
    },1000)
</script>
</body>
</html>

13、获取URL参数

1、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="index.html" method="get">
    <input name="uname" type="text">
    <input type="submit" value="提交">
</form>
</body>
</html>

2、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<script>
    let div = document.querySelector('div');
    let name = location.search.substr(1).split('=');  //uname = admin   [uname,admin]
    div.innerHTML = '欢迎您：'+name[1];
</script>
</body>
</html>

14、navigator对象

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "../H5/index.html"; //手机
}else{
    window.location,href = "../PC/index"; `	   //电脑
}

15、history对象

history.back()    //后退功能
history.forward() //前进功能
go(参数)			 //前进后退功能 参数如果是1前进一个页面，如果是-1后退一个页面