【原生JS】键盘事件

最新推荐文章于 2024-04-17 07:05:23 发布

dizhengshao3220

最新推荐文章于 2024-04-17 07:05:23 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/GruntFish/p/6876285.html

版权

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

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

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>

转载于:https://www.cnblogs.com/GruntFish/p/6876285.html

dizhengshao3220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【原生JS】键盘事件

视频播放器音量调节效果。效果图：“我很丑！~可是我有音乐和啤酒！~”HTML：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>volume</title></head&...
复制链接

扫一扫