键盘事件
常见的键盘事件
- 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>