webapi-04_综合

webapi-04

1.常用键盘事件

// 常用的键盘事件 //1. keyup 按键弹起的时候触发 // document.onkeyup = function() { // console.log('我弹起了');

    //     }// document.addEventListener('keyup', function () {//     console.log('我弹起了');// })
?//3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊// document.addEventListener('keypress', function () {//     console.log('我按下了press');// })//2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊// document.addEventListener('keydown', function () {//     console.log('我按下了down');// })// 4. 三个事件的执行顺序  keydown -- keypress -- keyup

    /*onkeydown 和 onkeyup  不区分字母大小写，onkeypress 区分字母大小写。在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值*/

2.键盘事件对象案例-京东快递

123

<script>// 1.获取元素var con=document.querySelector('.con')var jd=document.querySelector('.jd')//2.绑定事件//1.失去焦点，隐藏jd.addEventListener('blur',function(){con.style.display='none'})//2.获得焦点 有值显示，没有隐藏jd.addEventListener('focus',function(){if(this.value.trim() !== ''){con.style.display = 'block'}})//3.用户输入时进行判断赋值jd.addEventListener('keyup',function(){if(this.value.trim() !== ''){con.style.display = 'block'con.innerHTML= this.value}else {con.style.display = 'none'}})

3.window常见事件

    // window.addEventListener('load', function () {//     alert(22);// })
?// document.addEventListener('DOMContentLoaded', function () {//     alert(33);// })//     // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等//     // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
</script>

</head>

<body>

<button>点击</button>

</body>

4.调整窗口大小 resize

window.addEventListener('load', function() {

        var div = document.querySelector('div');window.addEventListener('resize', function() {console.log(window.innerWidth);//window.innerWidth 窗口大小
?console.log('变化了');if (window.innerWidth <= 800) {div.style.display = 'none';} else {div.style.display = 'block';}
?})})

5.定时器

// 1. setTimeout

// 语法规范： window.setTimeout(调用函数, 延时时间);

// 1. 这个window在调用的时候可以省略

// 2. 这个延时时间单位是毫秒但是可以省略，如果省略默认的是0

// 3. 这个调用函数可以直接写函数还可以写函数名还有一个写法 '函数名()'

// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符（名字)

// setTimeout(function() {

// console.log('时间到了');

// }, 2000);

// function callback() {

// console.log('爆炸了');

// }

// var timer1 = setTimeout(callback, 3000);

// var timer2 = setTimeout(callback, 5000);

// setTimeout('callback()', 3000); // 我们不提倡这个写法

清除定时器

clearTimeout（）

2.setInterval

// 1. setInterval

// 语法规范： window.setInterval(调用函数, 延时时间);

// setInterval(function() {

// console.log('继续输出');

// }, 1000);

// 2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器

// 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

6.倒计时案例

var hour = document.querySelector('.hour')

var minute = document.querySelector('.minute')

var second = document.querySelector('.second')

var inputTime = +new Date('2022-2-14 17:30:00')

function toTwo(v) {

return v < 10 ? '0' + v : v

}

function countDown() {

var nowTime = +new Date(); // 返回的是当前时间总的毫秒数

var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数

var h = parseInt(times / 60 / 60 % 24); //时

var m = parseInt(times / 60 % 60); // 分

var s = parseInt(times % 60); // 当前的秒

if (h <= 0 && s <= 0 && m <= 0) {

h = 0

s = 0

m = 0

clearInterval(timer)

}

hour.innerHTML = toTwo(h)

minute.innerHTML = toTwo(m)

second.innerHTML = toTwo(s)

}

countDown()

var timer = setInterval(countDown, 1000)

7.this指向问题

<button>点击</button>

// 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.onclick = function() {

// console.log(this); // this指向的是btn这个按钮对象

// }

btn.addEventListener('click', function() {

console.log(this); // this指向的是btn这个按钮对象

})

// 3. 构造函数中this指向构造函数的实例

function Fun() {

console.log(this); // this 指向的是fun 实例对象

}

var fun = new Fun();

8.js执行机制

9.location

url一般为：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

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);})

10.navigator

11.history

history.forward();前进

history.go(1);前进一步

history.back();后退

history.go(-1);后退一步