码迷,mamicode.com
首页 > Web开发 > 详细

【原生JS】键盘事件

时间:2017-05-19 00:49:04      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:call   播放器   radius   win   com   ddl   count   border   int   

 

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

 

技术分享

 

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

 

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

标签:call   播放器   radius   win   com   ddl   count   border   int   

原文地址:http://www.cnblogs.com/Glunefish/p/6876285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!