JavaScript：键盘事件、定时器

大家好，欢迎来到IT知识分享网。

1:键盘事件:

keydown 事件会在按键在元素上按下时触发

keyup 事件会在按键在元素上松开时触发

键盘事件只能绑定给可以获取焦点的元素

事件对象中key属性，表示当前所按的按键

keyCode返回的是按键的编号（不区分大小写和换挡）

类似于ctrl alt shift这种功能按键，在事件对象中都有专门判断属性

ctrlKey 用来判断ctrl是否被按下，按下返回true，否则返回false

altKey 用来判断alt是否按下

shiftKey 用来判断shift是否按下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 200px;

height: 200px;

background-color: #ff0;

}

</style>

<script>

window.onload = function () {

var inp = document.querySelector('[type=text]');

/*

keydown 事件 会在按键在元素上按下时触发

*/

// inp.addEventListener('keydown',function () {

// console.log('按键按下了~~');

// });

/*

keyup 事件 会在按键在元素上松开时触发

*/

// inp.addEventListener('keyup',function () {

// console.log('按键松开了~~');

// });

/*

键盘事件只能绑定给可以获取焦点的元素

*/

// document.getElementById('box1').addEventListener('keydown',function () {

// console.log('哈哈哈~~~');

// });

// document.querySelector('a').addEventListener('keydown',function () {

// console.log('按键按下了~~');

// });

document.addEventListener('keydown',function (ev) {

/*

事件对象中key属性，表示当前所按的按键

keyCode返回的是按键的编号（不区分大小写和换挡）

*/

// if(ev.key.toLowerCase() === 'k'){

// alert('你按了k了！');

// }

/*

判断用户的ctrl和k是否同时被按下

*/

// if(ev.key === 'Control' && ev.key.toLowerCase() === 'k') {

// alert('你的ctrl和k被同时按下了~~~');

// }

/*

类似于ctrl alt shift这种功能按键，在事件对象中都有专门判断属性

ctrlKey 用来判断ctrl是否被按下，按下返回true，否则返回false

altKey 用来判断alt是否按下

shiftKey 用来判断shift是否按下

*/

// if(ev.ctrlKey && ev.key.toLowerCase() === 'k') {

// alert('你的ctrl和k被同时按下了~~~');

// }

alert(ev.key);

});

};

</script>

</head>

<body>

<input type="text">

<a href="javascript:;">超链接</a>

<!--<div id="box1"></div>-->

</body>

</html>

2键盘控制div移动练习:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 100px;

height: 100px;

background-color: #f00;

position: absolute;

}

</style>

<script>

/*

通过键盘来控制div的移动

*/

window.onload = function () {

// 获取box1

var box1 = document.getElementById('box1');

// 为document绑定一个keydown事件

document.addEventListener('keydown',function (ev) {

// 判断按键的方向

dir = ev.key;

});

document.addEventListener('keyup',function (ev) {

// 判断按下的键和松开的键是不是同一个

if(dir === ev.key){

// 按键松开，重置dir

dir = '';

}

});

// 创建一个变量，用来记录运动的方向

var dir = '';

// 创建一个定时器，来控制元素的移动

setInterval(function () {

switch (dir) {

case 'ArrowUp':

case 'Up':

//向上移动

box1.style.top = box1.offsetTop - 10 + 'px';

break;

case 'ArrowDown':

case 'Down':

// 向下移动

box1.style.top = box1.offsetTop + 10 + 'px';

break;

case 'ArrowLeft':

case 'Left':

// 向左移动

box1.style.left = box1.offsetLeft - 10 + 'px'

break;

case 'ArrowRight':

case 'Right':

// 向右移动

box1.style.left = box1.offsetLeft + 10 + 'px'

break;

}

},30)

};

/* input.addEventListener('keydown', function (ev) {

// 限制在input中只能输出数字

// console.log(typeof ev.key);

// ev.key 是数字就让你输入，如果不是就禁止输入

// 取消keydown的默认行为

if(/\D/.test(ev.key)){ //用正则限制

ev.preventDefault();

}

});*/

</script>

</head>

<body>

<div id="box1"></div>

</body>

</html>

3定时器:

setTimeout() 用来设置函数在一定时间后执行

参数：

第一个要执行的函数

第二个间隔的时间（毫秒）

setTimeout(test, 3000);

clearTimeout() 用来关闭setTimeout()所设置的定时器

setInterval()

– 可以用来设置让一个函数反复的执行

– 参数：

1.要执行的函数

2.每次执行的间隔时间

– setInterval() 调用时，它会返回一个唯一的id作为参数，

这个id是定时器的唯一标识，可以通过标识来关闭定时器

clearInterval() 用来关闭定时器

clearInterval(timer);

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

function test() {

console.log('hello');

}

// test();

// 通过定时器可以设置函数在一定时候才执行

// setTimeout() 用来设置函数在一定时间后执行

// 参数：

// 第一个 要执行的函数

// 第二个 间隔的时间（毫秒）

// setTimeout(test, 3000);

//clearTimeout() 用来关闭setTimeout()所设置的定时器

/*

setInterval()

- 可以用来设置让一个函数反复的执行

- 参数：

1.要执行的函数

2.每次执行的间隔时间

- setInterval() 调用时，它会返回一个唯一的id作为参数，

这个id是定时器的唯一标识，可以通过标识来关闭定时器

*/

var timer = setInterval(test, 3000);

setTimeout(function () {

clearInterval(timer);

},10000)

// clearInterval() 用来关闭定时器

// clearInterval(timer);

</script>

</head>

<body>

</body>

</html>

4.定时器的setTimeout()做循环使用:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

// window.addEventListener('keydown',function () {

// alert(123);

// });

window.onload = function () {

var head = document.getElementById('head');

var num = 0;

// 创建一个定时器，来定时修改h1中的文字

setTimeout(function fn() {

num++;

head.innerHTML = num;

setTimeout(fn, 10*num);

},10);

};

</script>

</head>

<body>

<h1 id="head">0</h1>

</body>

</html>

对比requestAnimationFrame和setInterval :

requestAnimationFrame 和 setInterval 主要有以下几点区别:

1. 执行频率不同:

– requestAnimationFrame 依赖显示器的刷新频率,通常为 60Hz,对于大多数显示器每秒执行60次。

– setInterval 的执行间隔是固定的,并不依赖刷新频率,间隔时间可能高于显示器刷新频率。

2. 执行时机不同:

– requestAnimationFrame 在浏览器下一次重绘之前执行。

– setInterval 在定时器到期后尽快执行,可能导致丢帧。

3. 性能不同:

– requestAnimationFrame 不会引起多次重绘,性能更好。

– setInterval 可能引起多次重绘,性能较差,特别是间隔时间过短的情况。

4. 节流不同:

– requestAnimationFrame 自带节流功能,一般不会引起性能问题。

– setInterval 可能需要手动实现节流逻辑来避免频繁触发。

requestAnimationFrame是一个用于设置动画的API,它可以配合更新 DOM 的操作,保持最优的渲染性能。

功能:

– 告诉浏览器你希望执行一个动画,并请求浏览器在下次重绘之前调用指定的回调函数更新动画。

– 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘之前不会引起任何触发重绘的操作。

js用法:

把需要重复更新的动画代码放入函数,然后传入requestAnimationFrame创建一个递归循环。

优点:

– 和浏览器刷新频率保持同步,有效避免丢帧问题。

– 多个动画或DOM操作会被合并,减少重绘次数,提升性能。

– 自带节流功能,防止频繁触发重绘和回流。

所以requestAnimationFrame是构建复杂或高性能动画的好选择。（已编辑）

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#2023年度创作挑战##文章首发挑战赛##微头条激励计划##跨年幸运签##程序员#

#it##web网站##vue##react#

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/98083.html