前端入门系列--webAPI(4)

最新推荐文章于 2024-02-26 10:23:02 发布

黄家琛

最新推荐文章于 2024-02-26 10:23:02 发布

阅读量140

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44427572/article/details/105455165

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

1、常用键盘事件

1.1键盘事件

在这里插入图片描述
注意down的执行比press的执行要早；且press是区分大小写的而另外两个不区分大小写；

1.2键盘对象

在这里插入图片描述
注意该属性是其对象（一般记为e）的属性，示例代码如下：

// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
        //只要按下键盘就会触发，然后通过属性值判断按下哪个键
            console.log('up:' + e.keyCode);
            // 利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })

利用其可以实现按下键盘某一按键后将光标锁定在输入框的效果（配合focus方法）；

1.3快递单号上方放大效果

网页中的快递查询通常有在输入框中输入单号而在输入框上方进行显示的效果，如图所示：
在这里插入图片描述
分析：

代码如下：

  <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 获取要操作的元素
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
		// 给输入框注册keyup事件
        jd_input.addEventListener('keyup', function() {
				// 判断输入框内容是否为空
                if (this.value == '') {
                    // 为空，隐藏放大提示盒子
                    con.style.display = 'none';
                } else {
                    // 不为空，显示放大提示盒子，设置盒子的内容
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
        // 给输入框注册失去焦点事件，隐藏放大提示盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
        // 给输入框注册获得焦点事件
        jd_input.addEventListener('focus', function() {
            // 判断输入框内容是否为空
            if (this.value !== '') {
                // 不为空则显示提示盒子
                con.style.display = 'block';
            }
        })
    </script>

2、BOM对象

前面介绍过dom文档对象模型对象，现在介绍bom浏览器对象模型：提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window；两者主要区别如下：
在这里插入图片描述
即bom包含了dom：

2.1window对象

1、其是js访问浏览器窗口的一个接口；
2、其是一个全局对象，在全局中定义的变量、函数都会变成window对象的属性与方法；使用方法时不用在前面加上window.

2.2window方法

1、页面加载：
在这里插入图片描述
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数；

除上面方法外还有另一种方法：
在这里插入图片描述
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等，注意其是ie9以上才支持；

两种方法的使用区别：在对于图片较多的网页可以使用后者，不用等图片全部加载完就可以出发onload中的函数

 <script>
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
    </script>

如上代码，第三中方式在图片较多的网页中出来的效果要早于方式1、2；

2、调整窗口大小：
在这里插入图片描述
当调整浏览器的窗口大小时就会触发该函数，其可以用来完成响应式布局；其中，window.innerWidth 表示当前屏幕的宽度；
如下代码，实现了当浏览器窗口小于800时将选中的元素隐藏效果：

<script>
    // 注册页面加载事件
    window.addEventListener('load', function() {
        var div = document.querySelector('div');
    	// 注册调整窗口大小事件
        window.addEventListener('resize', function() {
            // window.innerWidth 获取窗口大小
            console.log('变化了');
            if (window.innerWidth <= 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    })
</script>
<div></div>

2.3定时器相关

window对象中提供了两个定时的方法：

setTimeout()

1、其中window可以省略；
2、调用函数可以在这里写，也可以写函数的名字，再于外部写函数的具体内容；
3、利用其可以实现广告n秒后关闭的效果
代码示例如下：

<script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
             console.log('时间到了');

         }, 2000);
        function callback() {
            console.log('爆炸了');
        }
		// 回调函数是一个有名函数，且这里写的timer在后面清除定时器可以用到，其是定时器的标识符
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
    </script>

在这里插入图片描述

其中的timeoutID传入的是如上面赋的timer1以及timer2，示例代码如下所示：

 <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
		// 开启定时器
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
		// 给按钮注册单击事件
        btn.addEventListener('click', function() {
            // 停止定时器
            clearTimeout(timer);
        })
    </script>

setInterval()

除setTimeout外的另一种方法；
两者的区别：前者是延时相应的时间后去执行回调函数，而后者是每隔设置的时间就执行回调函数；
示例代码如下：

<script>
        // 1. setInterval 
        setInterval(function() {
            console.log('继续输出');
        }, 1000);
</script>

利用该方法可以实现倒计时功能：
在这里插入图片描述

<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('2019-5-1 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 % 24); //时
        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>

相应的，其也有清除定时器的方法：
在这里插入图片描述
利用间隔回调以及取消定时器方法可以用来实现发送信息倒计时功能：

代码如下：

   <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
		// 全局变量，定义剩下的秒数
        var time = 3; 
		// 注册单击事件
        btn.addEventListener('click', function() {
            // 禁用按钮
            btn.disabled = true;
            // 开启定时器
            var timer = setInterval(function() {
                // 判断剩余秒数
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>

2.4this的指向相关

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

示例代码如下：

<button>点击</button>
<script>
    // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
    // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
    console.log(this);
    function fn() {
        console.log(this);
    }
    window.fn();
    window.setTimeout(function() {
        console.log(this);
    }, 1000);
    // 2. 方法调用中谁调用this指向谁
    var o = {
        sayHi: function() {
            console.log(this); // this指向的是 o 这个对象
        }
    }
    o.sayHi();
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
            console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
        })
    // 3. 构造函数中this指向构造函数的实例
    function Fun() {
        console.log(this); // this 指向的是fun 实例对象
    }
    var fun = new Fun();
</script>

2.5location对象

在这里插入图片描述
先介绍URL：

URL的组成如下：

其中，

location对象的属性如下图所示：
在这里插入图片描述
比如可以用location.href属性让页面进行跳转，配合上面的定时功能则可以实现页面定时跳转效果；
又location.search可以得到用户的登录信息等，可以用于设置欢迎语句等，如下所示：

在第二个页面中获取用户名并进行显示，代码如下：

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

除了常见属性外，location对象还有常用方法如下：
在这里插入图片描述
其使用如下代码所示：

<button>点击</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        // 记录浏览历史，所以可以实现后退功能
        // location.assign('http://www.itcast.cn');
        // 不记录浏览历史，所以不可以实现后退功能
        // location.replace('http://www.itcast.cn');
        location.reload(true);
    })
</script>

2.6navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值；
其可以用于判断是何种设备打开网站如一些电商网站如果用手机输入pc端的网址其会自动跳到手机端的网站，从而实现跳转：

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 = "";     //电脑
 }

2.6history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的UR；
在这里插入图片描述

3、js执行机制

3.1js单线程

在这里插入图片描述
但这种模式造成了js中所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

3.2同步任务与异步任务

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的；则同步任务是执行完一个任务后再执行下一个；
在这里插入图片描述

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情；相应的异步任务是不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行；

在这里插入图片描述

3.2js的执行机制

在这里插入图片描述

黄家琛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门系列--webAPI(4)

1、常用键盘事件1.1键盘事件注意down的执行比press的执行要早；且press是区分大小写的而另外两个不区分大小写；1.2键盘对象注意该属性是其对象（一般记为e）的属性，示例代码如下：// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 document.addEventListener('keyup', function(e) { ...
复制链接

扫一扫