想要实现效果:
1.点击表格后表格单元闪烁
2.监听键盘输入的按键
3.修改单元格内容
4.单元格停止闪烁
jQuery代码如下:
var blinkSet;
var $cell = 'default';
$(function () {
$('#skillKey tr').click(function () {
$cell = $(this).find('td:first-child');
activate();
});
function activate(){
blinkSet = setInterval(function () {
$cell.fadeTo(200, 0)
.fadeTo(200, 1);
}, 0);
$(document).one('keyup', function (e) {
var realKey='';
switch (e.which) {
case 96:
realKey = 'Num 0';
break;
case 97:
realKey = 'Num 1';
break;
case 98:
realKey = 'Num 2';
break;
case 99:
realKey = 'Num 3';
break;
case 100:
realKey = 'Num 4';
break;
case 101:
realKey = 'Num 5';
break;
case 102:
realKey = 'Num 6';
break;
case 103:
realKey = 'Num 7';
break;
case 104:
realKey = 'Num 8';
break;
case 105:
realKey = 'Num 9';
break;
case 112:
realKey = 'F1';
break;
case 113:
realKey = 'F2';
break;
case 114:
realKey = 'F3';
break;
case 115:
realKey = 'F4';
break;
case 116:
realKey = 'F5';
break;
case 117:
realKey = 'F6';
break;
case 118:
realKey = 'F7';
break;
case 119:
realKey = 'F8';
break;
case 120:
realKey = 'F9';
break;
case 121:
realKey = 'F10';
break;
case 122:
realKey = 'F11';
break;
case 123:
realKey = 'F12';
break;
case 8:
realKey = 'BKSP';
break;
case 9:
realKey = 'TAB';
break;
case 16:
realKey = 'SHIFT';
break;
case 17:
realKey = 'CTRL';
break;
case 18:
realKey = 'ALT';
break;
case 192: realKey = '`';
break;
case 27:
clearInterval(blinkSet);
$cell.css('opacity', 1);
return;
default:realKey = String.fromCharCode(e.which);
}
clearInterval(blinkSet);
$cell.css('opacity', 1);
$cell.text(realKey);
});
}
})
点击单元格后,可以顺利实现上述1,2,3功能,但是最后单元格无法停止闪烁。
当我把setInterval()函数中的时间间隔加大时,例如:
blinkSet = setInterval(function () {
$cell.fadeTo(200, 0)
.fadeTo(200, 1);
}, 200);
单元格会在内容被修改后继续闪烁若干次才会停止闪烁,当我把时间间隔增加至大约500ms以上时,才能实现键盘输入后,单元格内容改变并立即停止闪烁。
这是为什么?
前端新人一枚,代码可能有一些未意识到的不合理的地方,请各位海涵!
clearInterval(blinkSet);
$cell.stop(true).css('opacity', 1);
$cell.text(realKey);
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。