视频播放器音量调节效果。

效果图：“我很丑！~可是我有音乐和啤酒！~”

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】键盘事件的更多相关文章

  1. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  2. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  3. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  4. JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理

    1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...

  5. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  6. JS键盘事件对象之keyCode、charCode、which属性对比

    先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...

  7. 关于js键盘事件的例子

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  8. Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  9. js键盘事件

    弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(ﾟДﾟ)っ 想想都要生气< ...

  10. 2018.12/6 js键盘事件 DOM：0级2级

    DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...

随机推荐

  1. golang之结构体

    Go 语言使用结构体和结构体成员来描述真实世界的实体和实体对应的各种属性. Go语言通过用自定义的方式形成新的类型,结构体是类型中带有成员的复合类型. Go 语言中的类型可以被实例化,使用new或&a ...

  2. 批处理启动应用程序（win）

    @echo off net session >nul 2>&1 " ( echo Oops: This tools must run with administrator ...

  3. 关于本地文件请求json文件

    因为需要用到json数据格式,上网查了一下例子之后我就想本地测试一下看能不能成功. 结果,chrome下没有任何反应,打开控制台之后报错如下: XMLHttpRequest cannot load f ...

  4. webpack学习之—— 依赖图(Dependency Graph) 及 构建目标（Targets）

    Dependency Graph 任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系.这使得 webpack 可以接收非代码资源(non-code asset)(例如图像 ...

  5. Javascript面向对象编程（四）：非构造函数的继承

    什么叫非构造函数的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做"医生". v ...

  6. js的各种获取大小

    相信大家也经常会被js的获取大小搞得头昏脑胀,到底应该用哪种方式获取才是我要的那种大小呢 好啦,在此我帮大家整理好我知道的那些. window.screen.availHeight  获取的是当前电脑 ...

  7. CF1067E Random Forest Rank

    CF1067E Random Forest Rank 可以证明: 一个树的邻接矩阵的秩,等于最大匹配数*2(虽然我只能证明下界是最大匹配) 而树的最大匹配可以贪心, 不妨用DP模拟这个过程 f[x][ ...

  8. systemd管理nginx

    首先安装nginx,此处不做赘述. 保存以下内容到/lib/systemd/system/nginx.service文件. [Unit] Description=The NGINX HTTP and ...

  9. vue项目开发过程常见问题

    更新时间:2018-07-29 1.data functions should return an object // 这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下 <sc ...

  10. 比较全面的一个PHP缓存类解析

    转自:http://www.blhere.com/1164.html 一.引论 PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站 ...