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