Web APIs(四)

2024-03-14 22:14:05

键盘事件

  • onkeyup:键盘按键按下被松开时触发
  • onkeydown:键盘按键被按下时触发
  • onkeypress:键盘按键被按下时触发（不识别ctrl shift功能键）

三个键盘事件的执行顺序：onkeydown----onkeypress—onkeyup

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
</head>

<body>
</body>
<script>
    document.addEventListener('keydown', function() {
        console.log('keydown', ' 键盘按下啦');

    })
    document.addEventListener('keypress', function() {
        console.log('keypress', '键盘按下啦');

    })
    document.addEventListener('keyup', function() {
        console.log('keyup', '键盘按下又松开了');

    })
</script>

</html>

Web APIs(四)

区别如下

  • onkeydown onkeyup识别功能键(ctrl shift) 但不区分字母大小写
  • onkeypress区分大小写 但不识别功能键
  • 实际开发中 主要使用onkeyup与onkeypress

键盘事件对象之keyCode属性

e.keyCode:获得按键的ASCII码值


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件对象之keyCode属性</title>
</head>

<body>

</body>
<script>
    document.addEventListener('keydown', function(e) {
        console.log(e.keyCode);
        if (e.keyCode === 65) {
            alert('按下a键')
        } else {
            alert('没按下a键')
        }
    })
</script>

</html>

Web APIs(四)

模拟京东按键输入内容

当用户按下s键 光标就自动定位到文本框里面

思路如下

  • 1.检测用用户是否按下s建，如果按下s键，就把光标定位到文本框里面
  • 2.使用键盘事件中的keyCode来判断用户是否按下s键
  • 3.文本框获得焦点：使用js中的focus（）方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟京东按键输入内容</title>
</head>

<body>
    <input type="text">
</body>
<script>
    var ipt = document.querySelector('input');
    document.addEventListener('keyup', function(e) {
        console.log(e.keyCode);
        if (e.keyCode === 83) {
            ipt.focus()
        }
    })
</script>

</html>

Web APIs(四)

仿京东快递单号查询

1.快递单号输入内容时，上面的大号盒子con显示

2.同时把快递单号里面的值（value）赋值给con盒子(innerHTML)作为内容

3.如果快递单号为空，则隐藏大号字体盒子(con)盒子

4.当我们失去焦点，就隐藏con盒子

5.当我们获得焦点，并且文本框内容不为空，就显示这个盒子。


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东快递单号查询</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 400px;
            margin: 200px auto;
        }
        
        .con {
            position: absolute;
            display: none;
            left: 0px;
            top: -74px;
            width: 400px;
            height: 60px;
            font-size: 40px;
            border: 1px solid #ccc;
        }
        
        .con::after {
            position: absolute;
            left: 0;
            top: 60px;
            content: '';
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-top: 10px solid #ccc;
            line-height: 0;
            font-size: 0;
        }
        
        .search input {
            display: block;
            outline: none;
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text">
    </div>
</body>
<script>
    // 获取事件源
    var con = document.querySelector('.con');
    var ipt = document.querySelector('input');
    //事件处理程序
    ipt.addEventListener('keyup', function(e) {
        if (ipt.value == '') {
            con.style.display = 'none'
        } else {
            con.style.display = 'block';
            con.innerHTML = this.value;
        }
    })

    // 表单获取焦点与失去焦点事件
    ipt.addEventListener('focus', function(e) {
        if (this.value !== '') {
            con.style.display = 'block';
        }

    })

    ipt.addEventListener('blur', function(e) {
        con.style.display = 'none';
        this.value = ''
    })
</script>

</html>

Web APIs(四)

DOM

BOM:浏览器对象模型，提供访问与操作浏览器交互的接口与方法，其中BOM包含着DOM.其*对象是window

BOM缺乏标准

  • javascript的标准化组织是ECMA
  • DOM的标准化组织是W3C
  • BOM最初是Netscape浏览器标准的一部分。

DOM与BOM的区别

Web APIs(四)

BOM*对象之window

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM之*对象window</title>
</head>

<body>

</body>
<script>
    var num = 10;
    console.log(window.num);

    function fn() {
        console.log('Hello Word');
    }
    window.fn()
</script>

</html>

Web APIs(四)

window常见对象

窗口加载事件

window.onload 页面内容加载完毕，其中包括css flash dom元素 图片等

document.DOMContentloaded: DOM加载完毕，不包括css falsh 图片等等，加载速度比较快，但有兼容性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>窗口加载事件</title>
</head>
<script>
    window.addEventListener('load', function(e) {
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {
            alert('load')
        })

    })

    window.addEventListener('DOMContentLoaded', function(e) {
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {
            alert('DOMContentLoaded')
        })

    })
</script>

<body>
    <button>按钮</button>
</body>

</html>

Web APIs(四)

调整窗口大小加载事件

  • window.onresize = function(){};
  • windows.addEventListener(‘resize’,function(){})
  • windows.onresize:是调整窗口大小加载事件，当窗口大小发生改变时，则触发该事件

window.innerWidth:可以获取当前屏幕的宽度

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调整窗口大小事件</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<script>
    window.addEventListener('load', function() {
        var box = document.querySelector('div');
        console.log(box);
        window.addEventListener('resize', function() {
            console.log(window.innerWidth);
            // 窗口尺寸小于或等于900  盒子隐藏 反之则显示
            if (window.innerWidth <= 900) {
                box.style.display = 'none'
            } else {
                box.style.display = 'block'
            }
        })
    })
</script>

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

</html>

Web APIs(四)

定时器

window对象给我们提供2个非常好用的定时器方法

  • setTimeout()

  • setInterval()

setTimeout()

window.setTimeout(调用函数，[延迟的毫秒数])；

setTimeout()中的调用函数也被称为回调函数callback

注意事项

1.window可以省略
2.延迟的毫秒数默认为0，如果写，必须是毫秒
3.调用函数可以是函数 也可以是函数名
4.因为定时器很多，所以我们经常给定时器赋值给一个标识符。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setTimeout</title>
</head>

<body>

</body>
<script>
    setTimeout(function() {
        console.log('惊鸿一面');
    }, 2000)

    setTimeout(callback, 4000);
    setTimeout(callback, 8000);

    function callback() {
        console.log('临风笑却时间');
    }
</script>

</html>

Web APIs(四)

定时器之5秒之后关闭图像

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器之5秒之后关闭图像</title>
    <style>
        img {
            width: 400px;
        }
    </style>
</head>

<body>
    <img src="./images/desktop.jpg" alt="">
</body>
<script>
    setTimeout(function() {
        var img = document.querySelector('img');
        img.style.display = 'none'
    }, 5000)
</script>

</html>

Web APIs(四)

清除定时器

window.clearTimeout(timeoutID)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除定时器</title>
</head>

<body>
    <button>开始</button>
    <button>结束</button>
</body>
<script>
    var star = document.querySelectorAll('button')[0];
    var end = document.querySelectorAll('button')[1];
    console.log(star);
    console.log(end);
    var time = null;

    star.addEventListener('click', function() {
        time = setTimeout(function() {
            alert('hello')
        }, 5000);

    })
    end.addEventListener('click', function() {
        clearTimeout(time)
    })
</script>

</html>

Web APIs(四)

setInterval()

setInterval(callback,[间隔的毫秒数])

setInterval()是重复调用此函数，每隔一段时间就调用该回调函数

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setInteraval</title>
</head>

<body>

</body>
<script>
    setInterval(function() {
        console.log('Hello Word');
    }, 1000)
</script>

</html>

Web APIs(四)

定时器之倒计时效果

核心思路如下

  • 倒计时是不断变化的，因此需要定时器来实现自动变化的效果
  • 三个黑色盒子分别存放时分秒 利用innerHTML将数据存入盒子
  • 先调用一次这个函数，防止最开始刷新页面有空白问题
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        .time {
            width: 300px;
            margin: 200px auto;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: rgb(0, 0, 0);
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="time">
        <span class="day">天</span>
        <span class="hour"></span>
        <span class="min"></span>
        <span class="second"></span>
    </div>
</body>
<script>
    window.addEventListener('load', function() {
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour')
        var min = document.querySelector('.min')
        var second = document.querySelector('.second');

        var inputTime = +new Date('2021-7-25 18:00');
        countTime();
        setInterval(countTime, 1000)

        function countTime() {
            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000;
            var d = parseInt((times / 60 / 60 / 24));
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d + "天"
            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;
            min.innerHTML = m + "分"
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s + "秒"


        }
    })
</script>

</html>

Web APIs(四)

清除定时器

清除定时器：clearInterval(intervalID)



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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除定时器</title>
</head>

<body>
    <button>开始</button>
    <button>结束</button>
</body>
<script>
    var star = document.querySelectorAll('button')[0];
    var end = document.querySelectorAll('button')[1];
    console.log(star);
    console.log(end);
    var time = null;

    star.addEventListener('click', function() {
        time = setInterval(function() {
            console.log('Hello Word');
        }, 1000);

    })
    end.addEventListener('click', function() {
        clearInterval(time)
    })
</script>

</html>

Web APIs(四)

定时器之发送短信的案例

核心思路

1.按钮点击之后，会禁用disabled为true
2同时button里面的内容通过innerHTML修改
3.里面的秒数是有变化的，因此需要计时器
4.定义一个变量，在计时器里面，不断递减。


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器之发送短信案例</title>
</head>

<body>
    <input type="number" name="" id=""> <button>提交</button>
</body>
<script>
    // 获取事件源
    var ipt = document.querySelector('input');
    var bth = document.querySelector('button');
    var time = 3;
    // 事件处理程序
    bth.addEventListener('click', function() {
        bth.disabled = true;
        var timer = setInterval(function() {
            if (time == 0) {
                clearInterval(timer);
                bth.innerHTML = '提交';
                bth.disabled = false;
                time = 3;

            } else {
                bth.innerHTML = '还剩下' + time + '秒';
                time--;

            }
        }, 1000)
    })
</script>

</html>

Web APIs(四)

this指向

this的指向在函数定义的时候确定不了，只有在函数执行的过程中才能确定

this指向

  • 全局作用域的this 普通函数的this 定时器中的this指向window
  • 方法调用 this指向调用的对象
  • 构造函数中的this 指向构造函数中的实例对象；
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this指向</title>
</head>

<body>
    <button>提交</button>
</body>
<script>
    var bth = document.querySelector('button');
    // 全局作用域的this 普通函数的this  定时器中的this指向window
    console.log(this); //window;
    function fn() {
        console.log(this); //this
    };
    fn()

    setTimeout(() => {
        console.log(this);
    }, 2000);

    // 方法调用 this指向调用的对象
    var o = {
        sayHello: function() {
            console.log(this); //o
        }
    }
    o.sayHello()

    bth.addEventListener('click', function() {
        console.log(this); //button
    })

    // 构造函数中的this 指向构造函数中的实例对象；
    function Fun() {
        console.log(this);//fun
    }
    var fun = new Fun();
</script>

</html>

Web APIs(四)

js是单线程

javascript语言的一大特点就是单线程，同一个时间只能做一件事。

单线程语言意味着，所有的任务都需要排队，前一个任务结束，才会执行后一个任务，如果上一个任务消耗很长，后一个任务不得不等着。

为了解决这个问题，利用cpu的计算能力，HTML5允许javascript脚本创建多个线程

同步

必须等到上一个任务结束之后，才能执行下一个任务

异步

在执行上一个任务同时，还可以执行其它的任务

本质区别：流水线上的各个流程的执行顺序不同

js单线程

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js是单线程</title>
</head>

<body>

</body>
<script>
    console.log(1);
    setTimeout(() => {
        console.log(2);
    }, 3000);
    console.log(3);
</script>

</html>

Web APIs(四)

js的执行机制

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务
js的异步任务是通过回调函数实现的
一般而言，异步任务有三种类型
1.普通事件 如onclick resize等等
2.资源加载 如load,error等
3.定时器，包括setInterval,setTimeout等

异步任务相关的回调函数添加到任务队列中（任务队列也称为消息队列）

Web APIs(四)

js事件循环机制

由于主线程不断重复的获得任务，执行任务，再获取任务，再执行，这种机制叫做事件循环
Web APIs(四)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件循环进制</title>
</head>

<body>

</body>
<script>
    console.log(1);
    setTimeout(function() {
        console.log(2);
    }, 3000)
    document.addEventListener('click', function() {
        console.log('click');
    });
    console.log(3);
</script>

</html>

Web APIs(四)

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL

URL

URL:统一资源定位符，是互联网上标准资源的地址

格式

Web APIs(四)
Web APIs(四)
Web APIs(四)

location对象之5秒后跳往新页面

需要用到定时器 并且5秒之后更换location.href的地址即可


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location对象之5秒之后跳往新页面</title>
</head>

<body>
    <button>跳往</button>
    <div></div>
</body>
<script>
    var bth = document.querySelector('button');
    var div = document.querySelector('div');
    var time = 5;
    Time(); //先调用一次 防止刷新页面空白

    function Time() {
        bth.addEventListener('click', function() {
            setInterval(() => {
                if (time == 0) {
                    location.href = 'https://www.csdn.net/'
                } else {
                    div.innerHTML = '还剩下' + time + '秒'
                    time--
                }
            }, 1000);
        })
    }
</script>

</html>

Web APIs(四)

获取url参数

Vs code必须要下载Live Serve插件 使用Live Search插件打开页面

主要练习数据在不同页面的传递

1.利用substr()方法截取location.search参数
2.利用split(‘=’)把截取过来的参数转换成数组
3.把数组的第一项赋值给首页中的div元素

login.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
</head>

<body>
    <form action="index.html">
        用户：<input type="text" name="unmame">
        <input type="submit" value="登录">
    </form>

</body>

</html>

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页页面</title>
</head>

<body>
    <div></div>
</body>
<script>
    var div = document.querySelector('div');
    // 第一步：利用substr()方法截取location.href参数
    var pathname = location.search.substr(1);
    //第二步：利用split(‘=’)把截取过来的参数转换成数组
    var arr = pathname.split('=');
    console.log(arr);
    //第三步：把数组的第一项赋值给首页中的div元素
    div.innerHTML = arr[1] + "<b>欢迎你</b>"
</script>

</html>

Web APIs(四)

location对象中的常用方法

Web APIs(四)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location对象中的其它方法</title>
</head>

<body>
    <button>提交</button>
</body>
<script>
    var bth = document.querySelector('button');
    bth.addEventListener('click', function() {
        location.assign('https://www.csdn.net/')
    })
</script>

</html>

Web APIs(四)

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 = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

history对象

window给我们提供一个history对象，与浏览器历史记录进行交互。

  • history.forword()：前进
  • history.back()：后退
  • history.go(参数)，参数如果为1，则前进一个页面，参数如果为-1，则后退一个页面。

注意:以下文件位于同一目录中,history对象一般在OA办公系统中用的比较多

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <a href="list.html">点击去往列表页</a>
    <button>前进</button>
</body>
<script>
    var bth = document.querySelector('button');
    bth.addEventListener('click', function() {
        history.forward()
    })
</script>

</html>

list.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
</head>

<body>
    <a href="index.html">点击前往首页</a>
    <button>后退</button>
</body>
<script>
    var bth = document.querySelector('button');
    bth.addEventListener('click', function() {
        history.back()
    })
</script>

</html>

Web APIs(四)

上一篇：[JS]-07


下一篇：10个鲜为人知但很实用的Web API