关于web-api:Web-API4

46次阅读

共计 13314 个字符，预计需要花费 34 分钟才能阅读完成。

键盘事件

常见的键盘事件

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

三个事件的执行程序：onkeydown—-onkeypress—onkeyup

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script type="text/javascript">
            
        document.addEventListener('keydown',function(e){console.log('键盘按键被按下了 keydown')
        })
        
            
        document.addEventListener('keypress',function(e){console.log('键盘被按下了 press')
        })
        
            
        document.addEventListener('keyup',function(){console.log('键盘按键按下被松开了 keyup')
        })
    </script>
    </body>
    
</html>

键盘事件对象

  • keyCode: 返回该键的 AScll 码

留神

  • onkeydown 和 onkeyup 不辨别大小写，onkeypress 辨别字母的大小写
  • 在咱们理论开发中咱们更多的应用 keydown 和 keyup，他能辨认所有的功能键
  • keypress 不辨认功能键，然而 keyCode 属性能辨别大小写，返回不同的 ASCI 值
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script>
        // 键盘事件对象中的 keyCode 属性能够失去相应键的 ASCII 码值

        document.addEventListener('keyup', function(e) {console.log(e.keyCode);
            if (e.keyCode === 65) {alert("按下 a 键")
            } else {alert('没按下 a 键')
            }
        })


        document.addEventListener('keypress', function(e) {console.log(e.keyCode)
        });
        document.addEventListener('keydown', function(e) {console.log(e.keyCode)
        })
    </script>>
</body>

</html>

模仿京东按键输出内容

当咱们按下 s 键 光标就主动定位到搜寻框外面

思路如下
1. 检测用用户是否按下 s 建，如果按下 s 键，就把光标定位到搜寻框外面
2. 应用键盘事件中的 keyCod 来判断用户是否按下 s 键
3. 搜寻框取得焦点：应用 js 中的 focus（）办法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // 打印 s 键绝对应的 ASCI 嘛
            console.log(e.keyCode);
            if (e.keyCode === 83) {search.focus()
            }
        })
    </script>
</body>

</html>

仿京东快递单号查问

1. 快递单号输出内容时，下面的大号盒子 con 显示
2. 同时把快递单号外面的值（value）赋值给 con 盒子(innerText) 作为内容
3. 如果快递单号为空，则暗藏大号字体盒子(con) 盒子
4. 当咱们失去焦点，就暗藏 con 盒子
5. 当咱们取得焦点，并且文本框内容不为空，就显示这个盒子。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 600px;
            margin: 200px auto;
        }
        
        .con {
            position: absolute;
            top: -34px;
            left: -4px;
            width: 200px;
            height: 25px;
            border: 1px solid #3c3c3c;
            margin-bottom: 10px;
        }
        
        .con::after {
            position: absolute;
            top: 24px;
            left: 0;
            content: '';
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top: 10px solid #000000;
            /* 关照兼容性 */
            line-height: 0;
            font-size: 0;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" class='jd'>
    </div>
    <script>
        var con = document.querySelector('.con');
        var jd = document.querySelector('.jd');
        jd.addEventListener('keyup', function() {if (this.value == "") {con.style.display = "none"} else {
                con.style.display = "block";
                con.innerHTML = this.value
            }
        })

        jd.addEventListener('blur', function() {con.style.display = 'none'})
        jd.addEventListener('focus', function() {if (this.value !== '') {con.style.display = "block"}
        })
    </script>
</body>

</html>

BOM

BOM: 浏览器对象模型，提供拜访与操作浏览器交互的接口与办法，其中 BOM 蕴含着 DOM. 其顶级对象是 window
BOM 不足规范，javascript 的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最后是 Netscape 浏览器规范的一部分。
区别如下

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script>
           var num = 10;
           console.log(window.num);
           
           function fn() {console.log('hello')
           }
           window.fn()
       </script>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script>
           var num = 10;
           console.log(window.num);
           
           function fn() {console.log('hello')
           }
           window.fn()
       </script>
   </body>
</html>

window 常见事件

窗口加载事件

  • window.onload 页面内容加载结束，其中包含 css flash dom 元素 图片等
  • document.DOMContentloaded: DOM 加载结束，不包含 css falsh 图片等等，加载速度比拟快，但有兼容性
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

</head>
<script>
    window.addEventListener('load', function() {var bth = document.querySelector('button');
        bth.addEventListener('click', function() {alert("onload")
        })
    });
    
        
    document.addEventListener('DOMContentLoaded',function(){var bth = document.querySelector('button');
            
        bth.addEventListener('click',function(){alert('DOMContentLoaded')
        })
    })
</script>

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

</html>

窗口大小加载事件

window.onresize = function(){};
windows.addEventListener(‘resize’,function(){})

windows.onresize: 是调整窗口大小加载事件，当窗口大小产生扭转时，则触发该事件

window.innerWidth: 能够获取以后屏幕的宽度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            border-radius: 50%;
        }
    </style>
</head>
<script>
    window.addEventListener('load', function() {var div = document.querySelector('div');
        window.addEventListener('resize', function() {console.log(window.innerWidth);
            if (window.innerWidth <= 800) {div.style.display = 'none'}
        })
    })
</script>

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

</html>

定时器

window 对象给咱们提供 2 个十分好用的定时器办法

setTimeout()

setInterval()

setTimeout()

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

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

注意事项

1.window 能够省略
2. 提早的毫秒数默认为 0，如果写，必须是毫秒
3. 因为定时器很多，所以咱们常常给定时器赋值给一个标识符。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 第一种办法
        setTimeout(function() {console.log('hello')
        }, 2000)

        // 第二种办法
        function callback() {console.log('word')
        }

        var time1 = setTimeout(callback, 5000);
        var time2 = setTimeout(callback, 8000)
    </script>
</body>

</html>

5 秒后敞开广告

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.addEventListener('load', function() {var img = document.querySelector('img')

        function callback() {img.style.display = 'none'}

        setTimeout(callback, 2000)
    })
</script>

<body>
    <img src="./image/side.png" alt="">
</body>

</html>

革除定时器

window.clearTimeout(timeoutID)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var time = setTimeout(function() {console.log("hello word")
        }, 5000);

        clearTimeout(time)
    </script>
</body>

</html>

setInterval()

setInterval(callback,[距离的毫秒数])

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        setInterval(() => {console.log('hello')
        }, 2000);
    </script>
</body>

</html>

倒计时成果

外围思路如下

  • 这个倒计时是一直变动的，因而须要定时器来主动变动
  • 三个彩色盒子别离寄存时分秒
  • 三个盒子利用 innerHTML 放入计算的小时分钟秒数
  • 先调用一次这个函数，避免最开始刷新页面有空白问题
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .time {
            width: 400px;
            margin: 200px auto;
        }
        
        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            font: 700 normal 20px '微软雅黑';
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="time">
        <span class="hour">1</span>
        <span class="min">2</span>
        <span class="second">3</span>
    </div>

    <script>
        // 获取事件源
        var hour = document.querySelector('.hour');
        var min = document.querySelector('.min');
        var second = document.querySelector('.second');

        var inputTime = +new Date('2020-8-29 14:00:00');
        countDown()
        setInterval(countDown, 1000)

        function countDown(time) {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;
            min.innerHTML=m;
            var s = parseInt(times % 60); // 以后的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML =s; 
        } 
    </script>
</body>

</html>

进行定时器

window.clearInterval(intervalID);

注意事项

  • window 能够省略
  • 外面的参数是代表计时器的标识符
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="star"> 计时开始 </button>
    <button class="end"> 计时敞开 </button>
</body>
<script>
    // 获取事件源
    var star = document.querySelector('.star');
    var end = document.querySelector('.end');
    var time = null;
    star.addEventListener('click', function() {timer = setInterval(function() {console.log("hello word")
        }, 1000)
    })


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

</html>

!

发送短信案例

外围思路
1. 按钮点击之后，会禁用 disabled 为 true
2. 同时按钮外面的内容会变动，留神 button 外面的内容通过 innerHTML 批改
3. 外面的秒数是有变动的，因而须要计时器
4. 定义一个变量，在计时器外面，一直递加。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 800px;
            margin: 200px auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text"> <button> 发送短信 </button>
</body>
<script>
    var bth = document.querySelector('button');
    var time = 3;
    bth.addEventListener('click', function() {
        this.disabled = true;
        var timer = setInterval(function() {if (time == 0) {clearInterval(timer)
                bth.disabled = false;
                bth.innerHTML = '发送';
                time = 3
            } else {
                bth.innerHTML = '还剩下' + time + '秒'
                time--
            }

        }, 1000)


    })
</script>
</div>

</html>

this 指向

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

this 指向

  • 全局作用域下或者一般函数中的 this 指向 window(留神定时器中的 this 只想 window);
  • 办法调用中的谁调用 this 指向谁
  • 构造函数中的 this 指向构造函数的实例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button> 按钮 </button>
    <script>
        console.log(this) //window
        function fn() {console.log(this) //window
        }
        window.fn();


        var o = {sayHi: function() {console.log(this) //this 指向 o 这个对象
            }
        };
        o.sayHi();
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {console.log(this) //button
        });

        function Fun() {console.log(this) //this 指向的是 Fun 实例对象
        }
        var fun = new Fun()
    </script>
</body>

</html>

js 是单线程

javascript 语言的一大特点就是单线程，也就是说，同一个工夫只能做一件事。

单线程语言意味着，所有的工作都须要排队，前一个工作完结，才会执行后一个工作，如果一个工作耗费很长，后一个工作不得不等着。

同步工作

为了解决这个问题，利用 cpu 的计算能力，HTML5 提出 web worker 规范，容许 javascript 脚本创立多个线程

同步工作

必须等到上一个工作完结之后，能力执行下一个工作

异步

在执行上一个工作同时，还能够执行其它的工作

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

js 单线程

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

js 单线程

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(1);

        setTimeout(function() {console.log(3);
        }, 0);

        console.log(2);
    </script>
</body>

</html>

js 的执行机制

同步工作

同步工作都在主线程上执行，造成一个执行栈

异步工作
js 的异步工作是通过回调函数实现的
一般而言，异步工作有三种类型
1. 一般事件 如 onclick resize 等等
2. 资源加载 如 load,error 等
3. 定时器，包含 setInterval,setTimeout 等
异步工作相干的回调函数增加到工作队列中（工作队列也称为音讯队列）

js 的循环机制

因为主线程一直反复的取得工作，执行工作，再获取工作，再执行，这种机制叫做事件循环

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

location 对象

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

URL

URL: 对立资源定位符，是互联网上规范资源的地址

格局

京东案例

5 秒之后跳往首页

利用定时器做倒计时成果
工夫到了，就主动跳往首页，用 loaction.herf

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button> 点击 </button>
    <p></p>
</body>
<script>
    var bth = document.querySelector('button');
    var p = document.querySelector('p');

    bth.onclick = function() {location.href = 'https://www.baidu.com/'}
    var time = 5;
    setInterval(function() {if (time == 0) {location.href = 'https://www.baidu.com/'} else {
            p.innerHTML = '还剩' + time + '秒钟跳往首页';
            time--
    }, 1000)
</script>

</html>

获取 URL 参数

login.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        // 获取 location 属性；var pathname = location.search.substr(1);
        console.log(pathname)
        var arr = pathname.split('=');
        console.log(arr);
        var div = document.querySelector('div')
        div.innerHTML = arr[1] + "欢送你"
    </script>
</body>

</html>

location 对象中的罕用办法

  • location.assign(): 跟 href 一样，能够跳转页面（会记录历史）;
  • location.replace(): 替换以后页面，因为不记录历史，所以不能后退页面
  • location.reload(): 从新加载页面，相当于刷新按钮或者 F5，如果参数为 true，则强制刷新；
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button> 按钮 </button>
    <script>
        var bth = document.querySelector('button');
        bth.addEventListener('click', function() {location.assign("http://www.alloyteam.com/nav/");

        })
    </script>
</body>

</html>

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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="list.html"> 点我返回列表页 </a>;
    <button> 后退 </button>
    <script>
        var bth = document.querySelector('button')
        bth.addEventListener('click', function() {history.forward()
        })
    </script>
</body>

</html>

list.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

正文完
web-api
发表至： webapi
2020-08-30
 0
关于webapi:WebApi-性能优化
关于web-api:Web-API7
关于web-api:Web上的分享ShareAPI
关于webapi:简化调试流程超实用的WebAPI工具