JavaScript外设——键盘事件

2016-12-09  本文已影响0人  紫荆峰

0.前言

上一节讲了鼠标事件,现在来说说他的“兄弟”——键盘事件。

1.键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件与键盘事件的event对象</title>
</head>
<body>
    <script type="text/javascript">
        document.onkeydown = function(e) {
            var evt = e || window.event;

            console.log(evt);
            
        };
    </script>
</body>
</html>

效果:

捕获.PNG
altKey是键盘Alt键;
ctrKey是键盘Ctrl键;
keyCode表示的是你所按下的键盘的ASCII码;
shiftKey是键盘Shift键。
我们来测试一下:
document.onkeyup = function(e) {
            var evt = e || window.event;

            console.log(evt);
            console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
        };

document.onkeypress = function(e) {
            var evt = e || window.event;

            console.log(evt);
            console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
        };

效果自行演示,就不一一说明了。

扩展:获取屏幕的宽度和高度

//获取宽度
function $w() {
    return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}

//获取高度
function $h() {
    return document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
}

这有一个小例子:
html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件应用小例子</title>
</head>
<body>
    <div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;left: 1000px;top: 300px" ></div>
    <script type="text/javascript" src="sunckBase.js"></script>
    <script type="text/javascript">
        //按下shift和p使小方块变为黄色,使用上下左右键移动小方块
        
        var jsDiv = document.getElementById("box");

        var speed = 5;

        document.onkeydown = function(e) {
            var evt = e || window.event;

            var str = "p";
            if (evt.shiftKey == true && evt.keyCode == 80) {
                jsDiv.style.backgroundColor = "yellow";
            }


            switch(evt.keyCode) {
                case 37:
                    if (jsDiv.offsetLeft > 0) {
                        jsDiv.style.left = jsDiv.offsetLeft - speed + "px";
                    }
                    break;
                case 38:
                    if (jsDiv.offsetTop > 0) {
                        jsDiv.style.Top = jsDiv.offsetTop - speed + "px";
                    }
                    break;
                case 39:
                    if (jsDiv.offsetLeft + jsDiv.offsetWidth <= $w()) {
                        jsDiv.style.left = jsDiv.offsetLeft + speed + "px";
                    }
                    break;
                case 40:
                    if (jsDiv.offsetTop + jsDiv.offsetHeight <= $h()) {
                        jsDiv.style.top = jsDiv.offsetTop + speed + "px";
                    }
                    break;
            }

        };


        

    </script>
</body>
</html>

sunckBase.js代码如下:

//随机颜色
function randomColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);

    var colorString = "rgb(" + r + "," + g + "," + b + ")";
    return colorString;
}
//获取内部外部样式表中的样式属性的属性值
// obj--- 元素节点
// name----属性名
function getStyle(obj, name){
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    }else{
        return window.getComputedStyle(obj,null)[name];
    }
}

//设置元素样式属性
//obj--元素节点
//name--样式属性名
//value--样式属性值
function setStyle(obj, name, value) {
    obj.style[name] = value;
}


//获取宽度
function $w() {
    return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}

//获取高度
function $h() {
    return document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
}

2.总结

  节就这么简单,想必对大家都能够有所帮助,谢谢能够的大家的支持!!!!

上一篇 下一篇

猜你喜欢

热点阅读