【原生JS】键盘事件
视频播放器音量调节效果。
效果图:“我很丑!~可是我有音乐和啤酒!~”
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>volume</title>
</head>
<body>
<div id="volume_box">
<span id="volume_show">100%</span>
</div>
</body>
</html>
CSS:
<style>
#volume_box { width: 100px; height: 100px; border-radius: 50%; border: 3px #D9D9D9 solid; background-image: radial-gradient( circle , white , #E3E4E2); line-height: 100px; text-align: center; }
#volume_show { font-size: 25px; font-family: "微软雅黑"; font-weight: bold; color: gray; vertical-align: middle; }
</style>
JS:
<script>
onkeydown = function (e) {
var e = event || window.event || arguments.caller.arguments[0],
count = document.getElementById('volume_show'),
int = parseInt(count.innerHTML); if (e && e.keyCode === 40 && int > 0) {
count.innerHTML = int - 10 + '%';
}
if (e && e.keyCode === 38 && int < 100) {
count.innerHTML = int + 10 + '%';
}
}
</script>
【原生JS】键盘事件的更多相关文章
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- js键盘事件全面控制
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理
1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...
- js键盘事件和焦点事件
键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...
- JS键盘事件对象之keyCode、charCode、which属性对比
先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...
- 关于js键盘事件的例子
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
- Js键盘事件全面控制,回车按键事件,键盘对应按键码,按键事件兼容各个浏览器。
在网上查询的按键码如下: 一.键盘按键和键盘对应代码表: 字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...
- js键盘事件
弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(゚Д゚)っ 想想都要生气< ...
- 2018.12/6 js键盘事件 DOM:0级2级
DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...
随机推荐
- git出现“The file will have its original line endings in your working directory”错误
一.现象: git add *时出现如下现象: The file will have its original line endings in your working directory 解决: G ...
- HDU 1690 最短路
#include<stdio.h> #include<string.h> #include<queue> #include<algorithm> usi ...
- Python使用Pandas高效处理测试数据
转自:https://www.cnblogs.com/keyou1/p/10948796.html 一.思考 1.Pandas是什么? 功能极其强大的数据分析库 可以高效地操作各种数据集 csv格式的 ...
- 移动端适配之二:visual viewport、layout viewport和ideal viewport介绍
上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下, ...
- [Vue CLI 3] 插件开发之 registerCommand 到底做了什么
首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...
- day38 21-今天的内容总结
以前我们在web层里面去调Service再在Service里面去调DAO是一路new过去的,在web层里面new Service,然后在Service里面new DAO.每次你都需要主动去找这个对象. ...
- This Product is covered by one or more of the folloWing patents
借用一下网络图片,作为描述: 原因: 启动方式使用了网络启动, 解决方案: 进入bios,修改启动方式,禁用网卡驱动,使用从硬盘启动或者从U盘启动即可.
- ELK之elasticsearch安装&&kibana安装
1.ES和Kibana安装都是开箱即用的? 解压缩就可以用 elasticsearch解压缩之后,双击下图中的elasticsearch.bat,启动,kibana也是一样 双击之后, 我们看到上图有 ...
- 跟我一起认识axure(三)
交互设置,添加链接 点击预览
- webpack配置vue项目
npm init 安装webpack,webpack-cli 新建src目录,在src目录下新建main.js