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='';//清空消息框
}
实现效果图: