基本知识:
键盘事件对象属性
keyCode:获取键盘对应的ASCII码值(按键值)
document.onkeydown = function(e){
var e = e || event;
alert(e.keyCode);
}
onkeydown事件下,获取字母键都是按照大写字母的ASCII码值,也可以获取功能键的值
e.ctrlKey e.shiftKey e.altKey 功能键,当键盘按下时返回true
组合键触发:
e.altKey && keyCode== 13
默认回车键的keyCode值是13,左键–37,向上键–38,右键–39,向下键–40
onkeypress事件下,可以识别字母键输入的大小状态值。除了回车键–13,空格键–32以外,其他功能键都不触发
组合键触发:
e.ctrlKey && keyCode == 10
如果功能键ctrl+回车键,回车键的keyCode值为10
keyCode的兼容:
e.keyCode在火狐下的onkeypress事件下,所有的字符键返回的都是0
e.which(火狐)
e.charCode(safari)
document.onkeydown = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
}
小案例:字母打字游戏
动画库已经写好相关动画,如按键正确: “animated zoomIn”;按键错误: “animated shake error”;
初始页面如下:
以下是JS代码:
<script src="../../public.js"></script>
/*引用一些封装好的函数,用到的有:
1. id选择器
function $id(id){
return document.getElementById(id);
}
2. 获取某个范围之间的随机整数
function getRand(startNum,endNum){
return parseInt(Math.random()*(endNum-startNum+1) + startNum);
}*/
<script>
// 按键正确: "animated zoomIn";
// 按键错误: "animated shake error";
//页面加载 char中随机显示 A--Z之间的任意一个字符 65 --- 90
//在页面中显示A--Z之间的任意一个字符
//初始化页面显示随机字母
initShowLetter();
function initShowLetter() {
var chNum = getRand(65, 90);//随机获取65 --- 90的数
$id("char").innerHTML = String.fromCharCode(chNum);//得到以上随机数(ASCII码)对应的字符,并让其在页面展示
$id("char").className = "animated zoomIn"//给以上字符加出现动画
}
var rSum = 0;//计算正确
var wSum = 0;//计算错误
//使用document.onkeydown/press事件
document.onkeydown = function (e) {
var e = e || event;
//得到页面中的字母
var charVal = $id("char").innerHTML;
//获取一个e.keyCode的键码
var code = e.keyCode || e.which || e.charCode;
//通过键码得到一个字母
var ch = String.fromCharCode(code);
//用这个字母与$id("char").innerHTML当前的值比较
if (charVal == ch) {
//如果相等,说明正确:则切换下一个字母initShowLetter();计算正确率
$id("char").className = ""
setTimeout(function () {
initShowLetter();
}, 200)
rSum++;
$id("result").innerHTML = "正确" + rSum + "个,错误" + wSum + "个,正确率" + ((rSum / (rSum + wSum)).toFixed(4) * 100.toFixed(2) + "%";
} else {
//不等,说明不正确:执行动画animated shake error保持当前状态
$id("char").className = ""
setTimeout(function () {
$id("char").className = "animated shake error";
}, 200)
wSum++;
$id("result").innerHTML = "正确" + rSum + "个,错误" + wSum + "个,正确率" + ((rSum / (rSum + wSum)).toFixed(4) * 100.toFixed(2) + "%";
}
}
</script>
快试试吧~~