JavaWeb模拟键盘
来源:互联网 发布:保安腰刀淘宝店 编辑:程序博客网 时间:2024/03/29 06:18
模拟键盘
功能
1. 实现跑马灯效果
2.实现闪屏效果
3.按下按键,点亮对应按键;松开按键,熄灭对应按键
4.按下按键,输出其对应显示值、ASCII值、字符值及大写字符值
显示效果
跑马灯
闪屏
点亮按键
输出按键显示值、ASCII值等
技术点
- html—动态生成表格
- css—选择器
- js—定时器及onkeydown和onkeyup事件
- 数组及数组指针
代码
1.html代码
<html><head> <title>模拟键盘</title> <meta charset="UTF-8"/> <link rel="stylesheet" type="text/css" href="../css/key.css"/></head><body onkeydown="getKey(event);" onkeyup="getKey2(event);"> <table id="tableid1" border="1" cellspacing="0" cellpadding="5"> <tr id="showkeyvalueid" align="center"></tr> <tr id="showasciitrid" align="center"></tr> <tr id="showchartrid" align="center"></tr> <tr id="showdchartrid" align="center"></tr> </table></body><script src="../js/DefineArray.js" type="text/javascript" charset="utf-8"></script><script src="../js/DynamicCreateTable.js" type="text/javascript" charset="utf-8"></script><script src="../js/MarqueeAndSplash.js" type="text/javascript" charset="utf-8"></script><script src="../js/LightKeys.js" type="text/javascript" charset="utf-8"></script>
2.css代码
/*设置普通按键的样式*/ .divclass{ width: 80; height: 50; background-color: black; color: white; text-align: center; padding-top: 30; }/*设置占两列的按键的样式*/.divclasscol2{ width: 172; height: 50; background-color: black; color: white; text-align: center; padding-top: 30;}/*设置占两行的按键的样式*/.divclassrow2{ width: 80; height: 100; background-color: black; color: white; text-align: center; padding-top: 70;}/*设置占五行的按键的样式*/.divclasscol5{ width: 448; height: 50; background-color: black; color: white; text-align: center; padding-top: 30;}
3.js代码
DefineArray.js
/定义相关数组和数组指针/
/定义按键背景颜色数组/
var colors = [“red”,”orange”,”yellow”,”green”,”cyan”,”blue”,”purple”];
/定义按键背景颜色数组指针/
var colorsPos = 0;
/定义按键显示字符数组/
var chars = [“`”,”1”,”2”,”3”,”4”,”5”,”6”,”7”,”8”,”9”,”0”,”-“,”=”,”backspace←”,”num lk”,”/”,”*”,”-“,//18
“tab”,”Q”,”W”,”E”,”R”,”T”,”Y”,”U”,”I”,”O”,”P”,”[“,”]”,”\”,”7”,”8”,”9”,”+”,//18
“caps lock”,”A”,”S”,”D”,”F”,”G”,”H”,”J”,”K”,”L”,”;”,”\’”,”enter↵”,”4”,”5”,”6”,//16
“shift ⇑”,”Z”,”X”,”C”,”V”,”B”,”N”,”M”,”,”,”.”,”/”,”shift ⇑”,”Δ”,”1”,”2”,”3”,”enter”,//17
“ctrl”,”fn”,”❖”,”alt”,” “,”alt”,”Ξ”,”ctrl”,”◁”,”∇”,” ▷”,”0”,”.”//13
];
/定义按键显示字符数组指针/
var charsPos = 0;
/定义按键对应ASCII码值数组/
var asciis = [192,49,50,51,52,53,54,55,56,57,48,189,187,8,144,111,106,109,
9,81,87,69,82,84,89,85,73,79,80,219,221,220,103,104,105,107,
20,65,83,68,70,71,72,74,75,76,186,222,13,100,101,102,
16,90,88,67,86,66,78,77,188,190,191,16,38,97,98,99,13,
17,-1,91,18,32,18,93,17,37,40,39,96,110
];
DynamicCreateTable.js
/定义键盘每行个数数组/
var cols = [18,18,16,17,13];
/动态生成键盘/
var tab = new Array();
var row = 5;
var col = 19;
tab.push(“
for (var i = 0; i < row; i++) {
tab.push(“”);
for (var j = 0; j < cols[i]; j++) {
if(i==0&&j==13){
tab.push(““);
continue;
}
if(i==1&&j==0){
tab.push(““);
continue;
}
if(i==1&&j==17){
tab.push(““);
continue;
}
if((i==2&&j==0)||(i==2&&j==12)){
tab.push(““);
continue;
}
if((i==3&&j==0)||(i==3&&j==11)){
tab.push(““);
continue;
}
if(i==3&&j==16){
tab.push(““);
continue;
}
if(i==4&&j==4){
tab.push(““);
continue;
}
if(i==4&&j==7){
tab.push(““);
continue;
}
tab.push(““);“);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(““);
tab.push(“
tab.push(chars[charsPos++]);
tab.push(“
tab.push(“
}tab.push("</tr>");
}
tab.push(“”);
document.write(tab.join(“”));
MarqueeAndSplash.js
/实现跑马灯和闪屏效果/
/获取所有div标签对象/
var divs = document.getElementsByName(“divname”);
var divsPos = 0;
/定时器2执行代码/
/*for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = colors[colorsPos];
}
colorsPos++;
if(colorsPos==colors.length){
clearInterval(id2);
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = ‘black’;
}
}*/
/定时器2执行代码/
var code2 = “for (var i = 0; i < divs.length; i++) {“+
“divs[i].style.backgroundColor = colors[colorsPos];”+
“}”+
“colorsPos++;”+
“if(colorsPos==colors.length){“+
“clearInterval(id2);”+
“for (var i = 0; i < divs.length; i++) {“+
“divs[i].style.backgroundColor = ‘black’;”+
“}”+
“}”
/定时器1执行代码/
var on = 0;
var off = 0;
/*divs[off].style.backgroundColor = “black”;
divs[on].style.backgroundColor = colors[colorsPos];
off = on;
on++;
if(on==divs.length){
on = 0;
colorsPos++;
}
if(colorsPos==colors.length){
clearInterval(id1);
divs[divs.length-1].style.backgroundColor = “black”;
colorsPos=0;
var id2 = setInterval(code2,2000);
}*/
/定时器1执行代码/
var code1 = “divs[off].style.backgroundColor = ‘black’;”+
“divs[on].style.backgroundColor = colors[colorsPos];”+
“off = on;”+
“on++;” +
“if(on==divs.length){“+
“on = 0;”+
“colorsPos++;”+
“}”+
“if(colorsPos==colors.length){“+
“clearInterval(id1);”+
” divs[divs.length-1].style.backgroundColor = ‘black’;”+
“colorsPos=0;”+
“var id2 = setInterval(code2,1000);”+
“}”
/*
for (var i = 0; i < divs.length; i++) {
if(divsPos==i)
divs[divsPos].style.backgroundColor = colors[0];
else
divs[i].style.backgroundColor = colors[0];
}
divsPos++;
if(divsPos==divs.length)
divsPos=0;*/
/*var code = “for (var i = 0; i < divs.length; i++) {“+
“if(divsPos==i)”+
“divs[divsPos].style.backgroundColor = colors[0];”+
“else{“+
“divs[i].style.backgroundColor = ‘black’;}”+
“}”+
“divsPos++;”+
“if(divsPos==divs.length)”+
“divsPos=0;”*/
var id1 = setInterval(code1,20);
LightKeys.js
/按下按键,点亮对应按键;松开按键,熄灭对应按键/
var trkeyvalue = document.getElementById("showkeyvalueid");var trascii = document.getElementById("showasciitrid");var trchar = document.getElementById("showchartrid");var trdchar = document.getElementById("showdchartrid");trkeyvalue.innerHTML = "<td width='100'>按键显示值</td>";trascii.innerHTML = "<td>ASCII码值</td>";trchar.innerHTML = "<td>字符值</td>";trdchar.innerHTML = "<td>大写字符值</td>";var count = 0;function getKey(){ count++; trascii.innerHTML += "<td>"+ event.keyCode+"</td>"; trchar.innerHTML += "<td>"+String.fromCharCode(event.keyCode)+"</td>"; trdchar.innerHTML += "<td>"+String.fromCharCode(event.keyCode).toUpperCase()+"</td>"; for (var i = 0; i < asciis.length; i++) { if (asciis[i]==event.keyCode) { trkeyvalue.innerHTML += "<td id='tdid' width='30'>"+chars[i]+"</td>"; divs[i].style.backgroundColor = "deepskyblue"; break; } }
// divs[70].style.backgroundColor = “deepskyblue”;//不会执行,因为fn按键不会触发事件
if(count>=40){ trkeyvalue.innerHTML = "<td width='100'>按键显示值</td>"; trascii.innerHTML = "<td>ASCII码值</td>"; trchar.innerHTML = "<td>字符值</td>"; trdchar.innerHTML = "<td>大写字符值</td>"; count = 0; }}function getKey2(){ for (var i = 0; i < asciis.length; i++) { if(asciis[i]===event.keyCode){ divs[i].style.backgroundColor = "black"; return; } } alert("请打开数字锁定,否则无法正确识别数字开关所控按键!"); }
注意事项
1.onkeydown与onkeypress的区别
onkeydown 对于键盘上的所有按键(除fn之外)都可以通过event.keycode获取其字节码值 ,且不支持中英文切换,统一输出大写字母
onkeypress 对于键盘上的部分按键可以通过event.keycode获取其字节码值 ,且支持中英文切换
2.数字锁定开与关的区别
数字锁定打开和关闭时,其所控按键输出的event.keycode不同
- JavaWeb模拟键盘
- 键盘模拟
- 键盘模拟
- 键盘模拟
- 模拟键盘
- 模拟键盘
- 模拟鼠标和模拟键盘
- 鼠标、键盘模拟技术
- 模拟鼠标/键盘
- VC模拟键盘操作
- 鼠标键盘模拟技术
- VB模拟键盘操作
- VC模拟键盘详解
- c#键盘模拟
- 模拟键盘按键
- VC模拟键盘操作
- 模拟键盘按键
- java 键盘模拟
- 从苏宁电器到卡巴斯基(后传)第03篇:我与鱼C论坛的是是非非
- ASN.NET连接Access数据库开发
- 使用 install.packages() 安装所需的包
- 重载
- centos7.0时间修改
- JavaWeb模拟键盘
- Scala基础
- postgresql 关于geo 按距离排序返回 性能测试
- 1099. Build A Binary Search Tree (30)
- js闭包实现私有变量和单例模式
- RecyclerView轻松实现瀑布流效果
- 最全的常用正则表达式大全
- Java变量以及内存分配(非常重要)
- 文章标题