视频播放器音量调节效果。
效果图：“我很丑！~可是我有音乐和啤酒！~”
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>