描述:
一个基于油猴插件的按键显示的插件,主要可以用于教学演示
安装:
- 安装油猴插件,地址https://tampermonkey.net/
- 添加插件
- 运行插件
效果展示:
![](https://103.249.111.182/wp-content/uploads/2018/12/QQ截图20181223221112-833x1024.jpg)
Greasy Fork地址:
https://greasyfork.org/zh-CN/scripts/375905-typeshower
脚本代码:
// ==UserScript==
// @name TypeShower
// @namespace https://103.249.111.182/
// @version 1.0
// @description 动态显示输入
// @author 7gugu <gz7gugu@qq.com>
// @match https://tampermonkey.net/documentation.php?version=4.8.5847&ext=fire&updated=true
// @grant none
// @include *
// @require https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
// ==/UserScript==
(function() {
'use strict';
var id=1;
var key_array=new Array(200);
key_array[65]='a';
key_array[66]='b';
key_array[67]='c';
key_array[68]='d';
key_array[69]='e';
key_array[70]='f';
key_array[71]='g';
key_array[72]='h';
key_array[73]='i';
key_array[74]='j';
key_array[75]='k';
key_array[76]='l';
key_array[77]='m';
key_array[78]='n';
key_array[79]='o';
key_array[80]='p';
key_array[81]='q';
key_array[82]='r';
key_array[83]='s';
key_array[84]='t';
key_array[85]='u';
key_array[86]='v';
key_array[87]='w';
key_array[88]='x';
key_array[89]='y';
key_array[90]='z';
key_array[112]='F1';
key_array[113]='F2';
key_array[114]='F3';
key_array[115]='F4';
key_array[116]='F5';
key_array[117]='F6';
key_array[118]='F7';
key_array[119]='F8';
key_array[120]='F9';
key_array[121]='F10';
key_array[122]='F11';
key_array[123]='F12';
key_array[136]='Num_Lock';
key_array[137]='Scorll_Lock';
key_array[8]='BackSpace';
key_array[9]='Tab';
key_array[32]='Space';
key_array[13]='Enter';
key_array[16]='Shift';
key_array[17]='Ctrl';
key_array[18]='Alt';
key_array[20]='Caps';
key_array[27]='Esc';
key_array[37]='←';
key_array[38]='↑';
key_array[39]='→';
key_array[40]='↓';
key_array[45]='Ins';
key_array[46]='Del';
key_array[48]='0';
key_array[49]='1';
key_array[50]='2';
key_array[51]='3';
key_array[52]='4';
key_array[53]='5';
key_array[54]='6';
key_array[55]='7';
key_array[56]='8';
key_array[57]='9';
key_array[192]='`';
key_array[173]='-';
key_array[61]='+';
key_array[219]='[';
key_array[221]=']';
key_array[220]='\\';
key_array[59]=';';
key_array[222]='\'';
key_array[188]=',';
key_array[190]='.';
key_array[191]='/';
var key_shift=0;
var key_ctrl=0;
console.log("Typeshower已启用");
$("body").append("
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D'text%2Fcss'%3Etype%7Bpadding%3A%205px%2010px%3Bfont-size%3A%2087.5%25%3Bcolor%3A%20%23fff%3Bbackground-color%3A%20%23212529%3Bborder-radius%3A%205px%3Bfont-family%3ASFMono-Regular%2CMenlo%2CMonaco%2CConsolas%2C'Liberation%20Mono'%2C'Courier%20New'%2Cmonospace%3Bline-height%3A%201.5%3B%7D.key_list%7Bpadding%3A10px%3Bposition%3Afixed%3Bright%3A20px%3Btop%3A20px%3Bwidth%3A60px%3Bheight%3A50px%3Bz-index%3A999%3B%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
");
$("body").append("
<div class='key_list'></div>
");
document.onkeydown=function(event){
id++;
console.log("Typeshower 监听中");
var key_template="";
var e = event || window.event ;
if(e && e.keyCode){
if(key_shift==1){key_template="Shift+";}
if(key_ctrl==1){key_template="Ctrl+";}
key_template=key_template+key_array[e.keyCode];
$("div.key_list").append("<type id='"+id+"'>"+key_template+"</type>
");
if(e.keyCode==16){key_shift=1;}
if(e.keyCode==17){key_ctrl=1;}
}
$("type[id='"+id+"']").fadeOut(2500);
$("br").fadeOut(2500);
}
document.onkeyup=function(event){
var e = event || window.event ;
if(e && e.keyCode){
if(e.keyCode==16){key_shift=0;}
if(e.keyCode==17){key_ctrl=0;}
}
}
})();