首页 > 代码库 > 【原生JS】键盘事件

【原生JS】键盘事件

2024-09-23 07:47:49   216人阅读

 

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

 

技术分享

 

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

 

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】键盘事件


联系
我们