【原生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>

 

posted @ 2017-05-19 00:07  GruntFish  阅读(1354)  评论(0)  编辑  收藏  举报
返回顶部