这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果截图:
最近公司开发 ERP 项目,要求商品入库选择货架号时支持使用方向键快速选择,以提高入库效率。
html 代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- 选择货架号
- </title>
- <script type="text/javascript" src="01.js">
- </script>
- <style type="text/CSS">
- #table1 td { text-align:center; width:15%; } #table2 td { text-align:center;
- width:15%; background-color:#dcdcdc; cursor:pointer; }
- </style>
- <body>
- <table id="table1" border="0" cellpadding="1" cellspacing="1" style="width: 100%">
- <tr>
- <td>
- 货架
- </td>
- <td>
- 一层
- </td>
- <td>
- 二层
- </td>
- <td>
- 三层
- </td>
- <td>
- 四层
- </td>
- <td>
- 五层
- </td>
- </tr>
- </table>
- <table id="table2" border="0" cellpadding="1" cellspacing="1" style="width:100%;">
- <tr>
- <td style="background-color:#ffffff;">
- A001
- </td>
- <td id="td0" title="A001-1|11" style="background-color:#6699FF;">
- </td>
- <td id="td1" title="A001-2|12">
- </td>
- <td id="td2" title="A001-3|13">
- </td>
- <td id="td3" title="A001-4|14">
- </td>
- <td id="td4" title="A001-5|15">
- </td>
- </tr>
- <tr>
- <td style="background-color:#ffffff;">
- A002
- </td>
- <td id="td5" title="A002-1|21">
- </td>
- <td id="td6" title="A002-2|22">
- </td>
- <td id="td7" title="A002-3|23">
- </td>
- <td id="td8" title="A002-4|24">
- </td>
- <td id="td9" title="A002-5|25">
- </td>
- </tr>
- <tr>
- <td style="background-color:#ffffff;">
- A003
- </td>
- <td id="td10" title="A003-1|31">
- </td>
- <td id="td11" title="A003-2|32">
- </td>
- <td id="td12" title="A003-3|33">
- </td>
- <td id="td13" title="A003-4|34">
- </td>
- <td id="td14" title="A003-5|35">
- </td>
- </tr>
- <tr>
- <td style="background-color:#ffffff;">
- A004
- </td>
- <td id="td15" title="A004-1|41">
- </td>
- <td id="td16" title="A004-2|42">
- </td>
- <td id="td17" title="A004-3|43">
- </td>
- <td id="td18" title="A004-4|44">
- </td>
- <td id="td19" title="A004-5|45">
- </td>
- </tr>
- <tr>
- <td style="background-color:#ffffff;">
- A005
- </td>
- <td id="td20" title="A005-1|51">
- </td>
- <td id="td21" title="A005-2|52">
- </td>
- <td id="td22" title="A005-3|53">
- </td>
- <td id="td23" title="A005-4|54">
- </td>
- <td id="td24" title="A005-5|55">
- </td>
- </tr>
- </table>
- </body>
- </html>
javascript 代码:
- var tdnum = 0;
- var trid = "td";
- // 键盘事件
- document.onkeydown = function(event){
- // 兼容 Mozilla Firefox
- if (null == event) {
- event = window.event;
- }
- if (event.keyCode == 13) {
- p13key();
- }
- else if (event.keyCode <= 40 && event.keyCode >= 37) {
- keytd(event.keyCode);
- }
- }
- // 按下回车键
- function p13key(){
- var tdid = trid + tdnum;
- var tdtitle = document.getElementById(tdid).getAttribute("title");
- var pos = tdtitle.indexOf("|");
- var seatname = tdtitle.substring(0, pos);
- var seatid = tdtitle.substring(pos + 1, tdtitle.length);
- window.alert(seatname + "," + seatid);
- }
- // 变换颜色
- function setcolor(oldtd, newtd){
- document.getElementById(oldtd).style.backgroundColor="#dcdcdc";
- document.getElementById(newtd).style.backgroundColor="#6699FF";
- }
- // 实现切换功能主要代码
- function keytd(key){
- // 左
- if (key == 37) {
- --tdnum;
- if (null == document.getElementById(trid + tdnum)) {
- tdnum++;
- return;
- }
- setcolor(trid + (tdnum + 1), trid + tdnum);
- }
- // 右
- else if (key == 39) {
- ++tdnum;
- if (null == document.getElementById(trid + tdnum)) {
- tdnum--;
- return;
- }
- setcolor(trid + (tdnum - 1), trid + tdnum);
- }
- // 上
- else if (key == 38) {
- tdnum = tdnum - 5;
- if (null == document.getElementById(trid + tdnum)) {
- tdnum = tdnum + 5;
- return;
- }
- setcolor(trid + (tdnum + 5), trid + tdnum);
- }
- // 下
- else if (key == 40) {
- tdnum = tdnum + 5;
- if (null == document.getElementById(trid + tdnum)) {
- tdnum = tdnum - 5;
- return;
- }
- setcolor(trid + (tdnum - 5), trid + tdnum);
- }
- }
来源: http://www.phperz.com/article/17/0420/283923.html