WAPls.NO3

weixin_45671998

于 2021-03-29 18:52:37 发布

阅读量84

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45671998/article/details/115293812

版权

常用的键盘事件

onkeyup 按键弹起的时候触发

// document.onkeyup = function() {
//         console.log('我弹起了');

onkeydown 按键按下的时候触发能识别功能键比如 ctrl shift 左右箭头啊

 document.addEventListener('keypress', function() {
                console.log('我按下了press');

onkeypress 按键按下的时候触发不能识别功能键比如 ctrl shift 左右箭头啊

document.addEventListener('keydown', function() {
                console.log('我按下了down');

获取用户按下的键盘符号
每个按键都对应一个独有的keyCode的值。我们可以通过这种方式来判断用户是否按下了某键。

 document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up:' + e.keyCode);
             if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }

        })

keypress 可以识别字母大小写，
keydown不可以识别字母的大小写

BOM

BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
DOM与BOM的对比 在这里插入图片描述
BOM的构成

window对象是浏览器的顶级对象。

是JS访问浏览器的一个接口。
是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用的时候可以省略window

window对象的常见事件

窗口加载事件

window.onload = function(){}
window.addEventListener(‘load’,function)(){};

如果用window.onload 就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行函数
window.onload是传统的注册事件方式，只能使用一次，如果有多个，就以最后一个为准
如果使用监听器 addEventListener就没有次数限制

document.addEventListener(‘DOMContenLoaded’,function()){}

DOMContenLoaded事件触发时，仅当DOM加载完毕，不包括样式表，图片，flash等等
如果页面的图片很多，用户访问到load的时间较长，交互效果就不能实现，会影响用户的体验，此时用DOMContenLoaded事件比较合适

调整窗口大小事件
window.onresize = function(){}

window.addEventListener(‘resize’,function()){}

只要窗口的像素发生改变，就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth是当前屏幕的宽度。

window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })

定时器

setTimeout()
window.setTimeout(调用函数,[延迟的毫秒数]){}

window可以省略
延迟的毫秒数默认为0，如果写，单位必须是毫秒
这个函数需要延迟触发。

-   // window.setTimeout(function () {
    //   alert("哈哈");
    // },2000);
    function callback(){	
        alert('哈哈');
    }
    var time1 = setTimeout(callback,3000);
    var time1 = setTimeout(callback,5000);
  </script>
</html>

停止setTimeout（）定时器
window.clearTimeout(timeoutID)

var time = setTimeout(function () {
      img.style.display = "none";
    }, 5000);
    btn.addEventListener('click',function(){
        clearTimeout(time);
    })

setInterval()定时器
window.setInterval(回调函数，【间隔的秒数】)

每隔一段时间就执行一次
间隔秒数的单位是毫秒，默认为0。

时钟案例：

<style>
    span {
      width: 40px;
      height: 40px;
      background-color:#ccc;
      font-size:20px;
      text-align: center;
      line-height:40px;
      color:red;
    }
  </style>
  <body>
    <div id="shizhong">
      <span id="year"></span>
      <span id="month"></span>
      <span id="dates"></span>
      <span id="day"></span>
      <span id="hours"></span>
      <span id="minutes"></span>
      <span id="seconds"></span>
    </div>
  </body>
  <script>
    var year = document.getElementById("year");
    var month = document.getElementById("month");
    var dates = document.getElementById("dates");
    var day = document.getElementById("day");
    var hours = document.getElementById("hours");
    var minutes = document.getElementById("minutes");
    var seconds = document.getElementById("seconds");
    getDate();
    setInterval(getDate, 1000);
    function getDate() {
      var date = new Date();
      var n = date.getFullYear();
      year.innerHTML = n+'年';
      var y = date.getMonth()+1;
      month.innerHTML = y+'月';
      var r = date.getDate();
      dates.innerHTML = r+'日';
      var arr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var z = date.getDay();
      day.innerHTML = arr[z];
      h = date.getHours();
      h = h < 10 ? "0" + h : h;
      hours.innerHTML = h+'时';
      m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      minutes.innerHTML = m+'分';
      s = date.getSeconds();
      h = s < 10 ? "0" + s : s;
      seconds.innerHTML = s+'秒';
    }
  </script>

JS执行机制

JS是单线程

JS的一大特点就是单线程，也就是说，JS每次只能干一件事情。
单线程意味着，所有任务需要排队，前一个任务结束才能进行下一个任务，这样会导致：如果JS执行时间过长，导致页面渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

同步
前一个任务执行结束后再执行下一个任务。
异步
执行一个任务的时候，可以同时执行其他的任务。
同步任务
同步任务都在主线程上执行，形成一个任务栈

在这里插入图片描述

异步任务
异步任务有以下三种类型

普通事件，click，resize
资源加载，load，error
定时器，setintarver，setTimeout

JS的执行机制

先执行执行栈中的同步任务。
异步任务放入任务队列中。
一但执行栈中所有同步任务执行完毕后，系统会按照执行队列去执行异步任务。

location对象

location属性用于获取或者设置窗体的URL，并且解析URL。因为这个属性返回的是一个对象，所以我们将这个属性成为location对象。

URL
统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器怎么去处理它。

URL的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/indext.html?name =andy&age=18#link.

location对象的属性
location.hert(‘网址’)

location.assign(‘http://www.itcast.cn’);
记录浏览历史，所以可以实现后退功能

location.replace(‘http://www.itcast.cn’);
不记录浏览历史，所以不可以实现后退功能

location.reload(true);
重新加载该界面

navigator 对象

navigator对象包含浏览器的信息，他的很多属性，我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

下面的代码可以判断用户用的哪个终端打开的页面，实现跳转
在这里插入图片描述

history对象

window对象提供给我们一个history对象，与浏览器历史记录进行交互。该对象包含用户访问过得URL。
在这里插入图片描述

weixin_45671998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WAPls.NO3

常用的键盘事件onkeyup 按键弹起的时候触发// document.onkeyup = function() {// console.log('我弹起了');onkeydown 按键按下的时候触发能识别功能键比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() { console.log('我按下了press');onkeypress
复制链接

扫一扫