首页 > 代码库 > 【原生JS】键盘事件
【原生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】键盘事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。