网站首页 > 技术文章 正文
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用法:**
function checkElapsedTime() {
var currentTime = new Date();
var elapsedTime = currentTime - startTime;// 如果已经过了2小时（2*60*60*1000毫秒）
if (elapsedTime >= 2 * 60 * 60 * 1000) {
// 弹窗提示
alert("已经加载2小时了！");
} else {
// 未达到2小时，继续检查
requestAnimationFrame(checkElapsedTime);
}
}
把需要重复更新的动画代码放入函数,然后传入requestAnimationFrame创建一个递归循环。
**优点:**
- 和浏览器刷新频率保持同步,有效避免丢帧问题。
- 多个动画或DOM操作会被合并,减少重绘次数,提升性能。
- 自带节流功能,防止频繁触发重绘和回流。
所以requestAnimationFrame是构建复杂或高性能动画的好选择。 （已编辑）
欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。
在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
#2023年度创作挑战##文章首发挑战赛##微头条激励计划##跨年幸运签##程序员#
猜你喜欢
- 2024-10-05 聊聊浏览器的事件循环 浏览器循环点击插件
- 2024-10-05 vue 基础-生命周期 lifecycle 的执行顺序和作用
- 2024-10-05 前端如何搞监控总结篇 前端实时监控界面
- 2024-10-05 JavaScript setTimeout要理解 js中settime
- 2024-10-05 描述React的组件生命周期方法，并解释它们在何时被调用。
- 2024-10-05 面试必备-setTimeout vs setInterval哪个更准确，0ms延迟的真相
- 2024-10-05 autolog.js:一个小而美的toast插件。
- 2024-10-05 JavaScript 事件循环:理解进程、线程和异步编程
- 2024-10-05 高级前端进阶，你了解事件循环吗?
- 2024-10-05 「中高级前端」高性能渲染十万条数据(时间分片)
欢迎 你 发表评论:
- 05-10如何优化数据库和前端之间的交互?
- 05-10前端代码优化小秘籍（前端优化24条建议）
- 05-10VS Code当中的15个神仙插件，值得收藏
- 05-10如何自己开发一个Google浏览器插件?
- 05-10前端流行框架Vue3教程:14. 组件传递Props效验
- 05-10吃了一年的SU，最好用的插件都在这了
- 05-10前端必看!这款神器让网站界面告别千篇一律
- 05-10程序员请收好:10个非常有用的 Visual Studio Code 插件
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端懒加载 (45)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle查询数据库 (45)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论，来添加一个吧(●'◡'●)