乐趣区

关于web-api:Web-API4

作者：

jiezi

在

键盘事件

常见的键盘事件

  • 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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章