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

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

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. mysql的三种连接方式

    SQL的三种连接方式分为:左外连接.右外连接.内连接,专业术语分别为:LEFT JOIN.RIGHT JOING.INNER JOIN 内连接INNER JOIN:使用比较运算符来根据指定的连接的每个 ...

  2. 介绍vue项目中的axios请求（get和post）

    一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...

  3. Sublime Text3安装教程，配置教程，常用插件安装等方法

    前言: sublimeText3的特点: 1.Sublime Text 是一款跨平台代码编辑器,在Linux.OS X和Windows下均可使用. 2.Sublime Text 是可扩展的,并包含大量 ...

  4. 两种方法使vue实现jQuery调用

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...

  5. JFinalConfig

    概述 基于JFinal的web项目需要创建一个继承自JFinalConfig类的子类,该类用于对整个web项目进行配置. JFinalConfig子类需要实现六个抽象方法,如下所示: public c ...

  6. 【JZOJ4772】【NOIP2016提高A组模拟9.9】运输妹子

    题目描述 小轩轩是一位非同一般的的大农(lao)场(si)主(ji),他有一大片非同一般的农田,并且坐落在一条公路旁(可以认为是数轴),在他的农田里种的东西也非同一般--不是什么水稻小麦,而是妹子. ...

  7. 大数据技术之HA 高可用

    HDFS HA高可用 1.1 HA概述 1)所谓HA(High Available),即高可用(7*24小时不中断服务). 2)实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件的HA ...

  8. 装了ubuntu之后，只能进入ubuntu系统，不能进入windows系统

    电脑之前安装的是Windows 7系统, 后来在安装Linux系统中(快要完成)出现了故障, 没办法只能关机,之后重启,重启后只能进入Linux系统了 解决方案: 使用sudo update-grub ...

  9. core文件相关

    1:当一个程序崩溃时,在进程当前工作目录的core文件中复制了该进程的存储图像.core文件仅仅是一个内存映象(同时加上调试信息),主要是用来调试的. 当程序接收到以下UNIX信号会产生core文件: ...

  10. hdu 2089 不要62【数位dp】

    HDU 2089 求给定区间内不含62和4的数的个数. 数位dp入门.从这里我清楚了一些数位dp的用法.比如limit是判断是否达到上界,而且需要判断(!limit)..比如若题目要求不含11的个数, ...