JavaScript keyCode：键盘编码

最新推荐文章于 2023-05-03 21:45:30 发布

原创最新推荐文章于 2023-05-03 21:45:30 发布 · 662 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍如何使用JavaScript的键盘事件来控制网页上的小球移动，通过keyCode识别方向键进行实时位置更新，同时展示了如何利用回车键发送文本框内容至页面。

JavaScript键盘事件

keyCode：键盘编码

在这里插入图片描述

用键盘控制小球上下左右移动

用Left Arrow,Up Arrow,Right Arrow ,Dw Arrow按键来控制小球在页面的上下移动首先先设置小球的样式：.box { width: 150px; height: 150px; background: skyblue; position: absolute; left: 10px; top: 50px; border-radius: 50%; }建一个div，class为box。接下来的js如下编码：

var box=document.querySelector('.box');
 document.onkeydown = function (e) {
            e = e || window.event;
            // console.log(e.keyCode);
            switch (e.keyCode) {
                case 37:
                    moveHor(-5);
                    break;
                case 38:
                    // console.log('up');
                    moveVer(-5);
                    break;
                case 39:
                    // console.log('right');
                    moveHor(5);
                    break;
                case 40:
                    moveVer(5);
                    break;
            }
        };
        //水平移动
        function moveHor(speed) {
            var l = window.getComputedStyle(box, null).left;
            l = parseFloat(l); //去掉单位
            box.style.left = l + speed + "px";
        }
        //垂直移动
        function moveVer(speed) {
            //获取top值
            var t = window.getComputedStyle(box, null).top;
            t = parseFloat(t);
            //修改top值
            box.style.top = t + speed + 'px';
        }

这样就可以实现用键盘控制小球来移动啦=-=

用回车发送文本框的内容到页面中

一个简易的回车发送信息的代码，首先建两个div，并运用一个文本框，一个按钮，给这些加上样式：

发送

   body{background: #eee;padding: 0;margin: 0;}
  .cnt{width: 500px;height: 500px;margin: auto;background: #fff;padding: 2px 20px;}
  .bt{width: 100%;height: 280px;background: #aaa;text-align: center;line-height: 200px;}
   input{width: 300px;height: 35px;}
   button{width: 100px;height: 40px;border: none;margin-left: 20px;}
   span{background: skyblue;padding: 5px 10px;border-radius: 3px;
  text-align: center;display: inline-block;margin-bottom: 20px;}

加过这些样式之后，就要开始写script啦其实也可以写前面，因为script写哪里都可以，但是程序是自上往下运行的，所以如果加到前面要加一个onload哦因为它是窗口页面加载完毕事件详细看代码：

var o=document.getElementsByClassName('cnt')[0];//div
        var ipt=document.getElementsByTagName('input')[0];
        //发送事件
        document.querySelector('button').onclick=function(){
            send();
        };
        //回车事件
        ipt.onkeyup=function(e){
            e=e||window.event;
            if(e.keyCode==13){
                send();
            }
        };
        //发送信息
        function send(){
            // console.log(ipt.value);
            var txt=ipt.value;
            if(txt.trim()==''){
                alert('消息不能为空！');
                return;
            }
            //创建标签
            var s=document.createElement('span');
            s.innerHTML=txt;
            o.appendChild(s);//将新建的标签添加到div中
            o.innerHTML=o.innerHTML+"<br>";//添加换行

            ipt.value='';//清空消息框
        }