当你在敲击键盘的时候, 按照标准键盘布局的位置，出现对应键位的动画特效
目前為
// ==UserScript==
// @name 敲起来(按照标准键盘布局显示对应位置)
// @description 当你在敲击键盘的时候, 按照标准键盘布局的位置，出现对应键位的动画特效
// @version 0.3.0
// @author Axetroy
// @include *
// @require https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js
// @grant none
// @run-at document-start
// @namespace https://gf.qytechs.cn/zh-CN/users/3400-axetroy
// @license The MIT License (MIT); http://opensource.org/licenses/MIT
// ==/UserScript==
(function ($) {
let cursor = {
x: 0,
y: 0
};
let bianju=30;
let wh={
w:0,
h:0
};
let keyboardMap = [
//键位，x坐标，y坐标，高比例，宽比例
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["CANCEL",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["HELP",0,1,1,1,0],
["",0,1,1,1,0],
["BACK SPACE",2,1,1,2,1.5],
["TAB↹",-11,2,1,1.5,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["CLEAR",0,1,1,1,0],
["↲Enter",2,3,1,2,0],
["ENTER SPECIAL",0,1,1,1,0],
["",0,1,1,1,0],
["⇑Shft",-11,4,1,2,0],
["Ctrl",-11,5,1,1,0],
["Alt",-8.5,5,1,1,0],
["PAUSE",0,1,1,1,0],
["大/小 写",-11,3,1,1.8,0],
["KANA",0,1,1,1,0],
["EISU",0,1,1,1,0],
["JUNJA",0,1,1,1,0],
["FINAL",0,1,1,1,0],
["HANJA",0,1,1,1,0],
["",0,1,1,1,0],
["Esc",-12,1,1,1,-12],
["CONVERT",0,1,1,1,0],
["NONCONVERT",0,1,1,1,0],
["ACCEPT",0,1,1,1,0],
["MODECHANGE",0,1,1,1,0],
["空格",-7,5,1,5.5,0],
["PAGE UP",7,1,1,1,0],
["PAGE DOWN",7,2,1,1,0],
["END",6,2,1,1,0],
["HOME",6,1,1,1,0],
["左",5,5,1,1,0],
["上",6,4,1,1,0],
["右",7,5,1,1,0],
["下",6,5,1,1,0],
["SELECT",0,1,1,1,0],
["PRINT",0,1,1,1,0],
["EXECUTE",0,1,1,1,0],
["PRINTSCREEN",0,1,1,1,0],
["INSERT",5,1,1,1,0],
["DELETE",5,2,1,1,0],
["",0,1,1,1,0],
["わ(ﾜ) を(ｦ)",-1,1,1,1,0.5],
["ぬ(ﾇ)",-10,1,1,1,-10.5],
["ふ(ﾌ)",-9,1,1,1,-9.5],
["あ(ｱ) あ",-8,1,1,1,-8.5],
["う(ｳ) う",-7,1,1,1,-7.5],
["え(ｴ) え",-6,1,1,1,-6.5],
["お(ｵ) お",-5,1,1,1,-5.5],
["や(ﾔ) や",-4,1,1,1,-4.5],
["ゆ(ﾕ) ゆ",-3,1,1,1,-3.5],
["よ(ﾖ) よ",-2,1,1,1,-1],
["COLON",0,1,1,1,0],
["SEMICOLON",0,1,1,1,0],
["LESS THAN",0,1,1,1,0],
["EQUALS",0,1,1,1,0],
["GREATER THAN",0,1,1,1,0],
["QUESTION MARK",0,1,1,1,0],
["AT",0,1,1,1,0],
["ち(ﾁ)",-9.2,3,1,1,0],
["こ(ｺ)",-4.5,4,1,1,0],
["そ(ｿ)",-6.5,4,1,1,0],
["し(ｼ)",-7.2,3,1,1,0],
["い(ｲ)",-7.5,2,1,1,0],
["は(ﾊ)",-6.2,3,1,1,0],
["き(ｷ)",-5.2,3,1,1,0],
["く(ｸ)",-4.2,3,1,1,0],
["に(ﾆ)",-2.5,2,1,1,0],
["ま(ﾏ)",-3.2,3,1,1,0],
["の(ﾉ)",-2.2,3,1,1,0],
["り(ﾘ)",-1.2,3,1,1,0],
["も(ﾓ)",-2.5,4,1,1,0],
["み(ﾐ)",-3.5,4,1,1,0],
["ら(ﾗ)",-1.5,2,1,1,0],
["せ(ｾ)",-0.5,2,1,1,0],
["た(ﾀ)",-9.5,2,1,1,0],
["す(ｽ)",-6.5,2,1,1,0],
["と(ﾄ)",-8.2,3,1,1,0],
["か(ｶ)",-5.5,2,1,1,0],
["な(ﾅ)",-3.5,2,1,1,0],
["ひ(ﾋ)",-5.5,4,1,1,0],
["て(ﾃ)",-8.5,2,1,1,0],
["さ(ｻ)",-7.5,4,1,1,0],
["ん(ﾝ)",-4.5,2,1,1,0],
["つ(ﾂ)",-8.5,4,1,1,0],
["OS KEY",-9.5,5,1,1,0],
["",0,1,1,1,0],
["CONTEXT MENU",0,1,1,1,0],
["",0,1,1,1,0],
["SLEEP",0,1,1,1,0],
["NUM 0",9,5,1,2,0],
["NUM 1",9,4,1,1,0],
["NUM 2",10,4,1,1,0],
["NUM 3",11,4,1,1,0],
["NUM 4",9,3,1,1,0],
["NUM 5",10,3,1,1,0],
["NUM 6",11,3,1,1,0],
["NUM 7",9,2,1,1,0],
["NUM 8",10,2,1,1,0],
["NUM 9",11,2,1,1,0],
["×",11,1,1,1,10.5],
["+",12,2,2,1,0],
["SEPARATOR",0,1,1,1,0],
["-",12,1,1,1,11.5],
[".",11,5,1,1,0],
["÷",10,1,1,1,9.5],
["F1",-10,1,1,1,-10],
["F2",-9,1,1,1,-9],
["F3",-8,1,1,1,-8],
["F4",-7,1,1,1,-7],
["F5",-5.5,1,1,1,-5],
["F6",-4.5,1,1,1,-4],
["F7",-3.5,1,1,1,-3],
["F8",-1,1,1,1,-2],
["F9",-1,1,1,1,-0.5],
["F10",0,1,1,1,0.5],
["F11",1,1,1,1,1.5],
["F12",2,1,1,1,1],
["F13",0,1,1,1,0],
["F14",0,1,1,1,0],
["F15",0,1,1,1,0],
["F16",0,1,1,1,0],
["F17",0,1,1,1,0],
["F18",0,1,1,1,0],
["F19",0,1,1,1,0],
["F20",0,1,1,1,0],
["F21",0,1,1,1,0],
["F22",0,1,1,1,0],
["F23",0,1,1,1,0],
["F24",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["NUM LOCK",9,1,1,1,8.5],
["SCROLL LOCK",0,1,1,1,0],
["WIN OEM FJ JISHO",0,1,1,1,0],
["WIN OEM FJ MASSHOU",0,1,1,1,0],
["WIN OEM FJ TOUROKU",0,1,1,1,0],
["WIN OEM FJ LOYA",0,1,1,1,0],
["WIN OEM FJ ROYA",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["CIRCUMFLEX",0,1,1,1,0],
["EXCLAMATION",0,1,1,1,0],
["DOUBLE QUOTE",0,1,1,1,0],
["HASH",0,1,1,1,0],
["DOLLAR",0,1,1,1,0],
["PERCENT",0,1,1,1,0],
["AMPERSAND",0,1,1,1,0],
["UNDERSCORE",0,1,1,1,0],
["OPEN PAREN",0,1,1,1,0],
["CLOSE PAREN",0,1,1,1,0],
["ASTERISK",0,1,1,1,0],
["PLUS",0,1,1,1,0],
["PIPE",0,1,1,1,0],
["HYPHEN MINUS",0,1,1,1,0],
["OPEN CURLY BRACKET",0,1,1,1,0],
["CLOSE CURLY BRACKET",0,1,1,1,0],
["TILDE",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["VOLUME MUTE",0,1,1,1,0],
["VOLUME DOWN",0,1,1,1,0],
["VOLUME UP",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["れ(ﾚ)",-0.2,3,1,1,0],
["へ(ﾍ)",1,1,1,1,0.5],
["ね(ﾈ)、",-1.5,4,1,1,0],
["ほ(ﾎ)",0,1,1,1,0],
["る(ｩ)。",-0.5,4,1,1,0],
["め(ﾒ)・",0.5,4,1,1,-10.5],
["ろ(ﾛ)",-11,1,1,1,-11.5],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["゛(濁点)",0.5,2,1,1,0],
["む(ﾑ)",2.5,2,1,1.5,0],
["゜(半濁点)",1.5,2,1,1,0],
["け(ｹ)",0.8,3,1,1,0],
["",0,1,1,1,0],
["META",0,1,1,1,0],
["ALTGR",0,1,1,1,0],
["",0,1,1,1,0],
["WIN ICO HELP",0,1,1,1,0],
["WIN ICO 00",0,1,1,1,0],
["",0,1,1,1,0],
["WIN ICO CLEAR",0,1,1,1,0],
["",0,1,1,1,0],
["",0,1,1,1,0],
["WIN OEM RESET",0,1,1,1,0],
["WIN OEM JUMP",0,1,1,1,0],
["WIN OEM PA1",0,1,1,1,0],
["WIN OEM PA2",0,1,1,1,0],
["WIN OEM PA3",0,1,1,1,0],
["WIN OEM WSCTRL",0,1,1,1,0],
["WIN OEM CUSEL",0,1,1,1,0],
["WIN OEM ATTN",0,1,1,1,0],
["WIN OEM FINISH",0,1,1,1,0],
["WIN OEM COPY",0,1,1,1,0],
["WIN OEM AUTO",0,1,1,1,0],
["WIN OEM ENLW",0,1,1,1,0],
["WIN OEM BACKTAB",0,1,1,1,0],
["ATTN",0,1,1,1,0],
["CRSEL",0,1,1,1,0],
["EXSEL",0,1,1,1,0],
["EREOF",0,1,1,1,0],
["PLAY",0,1,1,1,0],
["ZOOM",0,1,1,1,0],
["",0,1,1,1,0],
["PA1",0,1,1,1,0],
["WIN OEM CLEAR",0,1,1,1,0],
["",0,1,1,1,0]
];
let mouseMap = [
["左键",-1.5,-1,1,1,-1],
["中键",-0.5,-1,1,1,0],
["右键",0.5,-1,1,1,1]
];
// keyboardMap.map(function (key) {
// return key.replace(/-|_/g, ' ')
// });
function createEle({key, color = '#555', pageX, pageY}) {
let $span = $(`<span>${key}</span>`)
.css({
// margin:"10%",
// textalign:"center",
textalign:"right",
position: "absolute",
zIndex: 999999999,
top: pageY + "px",
left: pageX + "px",
display: "inline-block",
// padding: "5px",
fontSize: bianju/20,
// fontSize: bianju+ "px",
height:wh.h,
width:wh.w,
// lineHeight: "10px",
color: color,
// verticalAlign: "middle",
backgroundColor: "#fcfcfc",
border: "solid 1px #ccc",
borderBottomColor: "#bbb",
borderRadius: "5px",
boxShadow: "inset 0 -1px 0 #bbb"
}).appendTo(document.body);
setTimeout(function () {
$span.animate({
opacity: 0,
top: "-=20"
}, 500, function () {
$span.remove();
$span = null;
})
}, 500);
}
function stringToColor(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = '#';
for (let x = 0; x < 3; x++) {
let value = (hash >> (x * 8)) & 0xFF;
colour += ('00' + value.toString(16)).substr(-2);
}
return colour;
}
// record coordinate
$(window).on('mousemove', function (event) {
event = event || window.event;
cursor.x = event.pageX;
cursor.y = event.pageY;
// console.log("鼠标event.pageX=",event.pageX,"鼠标event.pageY=",event.pageY);
// console.log("鼠标cursor.x=",cursor.x,"鼠标cursor.y=",cursor.y);
});
$(window).on('keyup', function (event) {
// let {x, y} = x, y;
// console.log("let键盘x=",x,"let键盘y=",y);
//console.log("键盘cursor.x=",cursor.x,"键盘cursor.y=",cursor.y);
wh.w=bianju*keyboardMap[event.keyCode][4];
wh.h=bianju*keyboardMap[event.keyCode][3];
createEle({
key: keyboardMap[event.keyCode][0],
color: stringToColor((event.keyCode + event.key).repeat(2)),
pageX: cursor.x+keyboardMap[event.keyCode][1]*bianju+(keyboardMap[event.keyCode][1]+0.5)*5,
pageY: cursor.y+keyboardMap[event.keyCode][2]*(bianju+5)
});
// console.log("let键盘key=",keyboardMap[event.keyCode]);
console.log("let键盘event.keyCode=",event.keyCode);
// console.log("键盘x=",x,"键盘y=",y);
});
$(window).mousedown(function (event) {
let key = mouseMap[event.which-1][0];
//let {x, y} = randomXY(event.pageX, event.pageY);
//console.log("let鼠标x=",x,"let鼠标y=",y);
console.log("let鼠标event.which=",event.which);
console.log("let鼠标key=",key);
wh.w=bianju*mouseMap[event.which-1][4];
wh.h=bianju*mouseMap[event.which-1][3];
createEle({
key: key,
color: stringToColor(key),
pageX: cursor.x +mouseMap[event.which-1][1]*bianju+(mouseMap[event.which-1][1]+0.5)*5,
pageY: cursor.y+mouseMap[event.which-1][2]*(bianju+5)
});
console.log("pageX=",cursor.x +(mouseMap[event.which-1][1])*(bianju),"pageY=",cursor.y+(mouseMap[event.which-1][2]*(bianju)));
console.log("cursor.x=",cursor.x,"cursor.y=",cursor.y);
});
})(window.jQuery.noConflict(true));
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址