敲起来([日语假名]按照标准键盘布局显示对应位置)

当你在敲击键盘的时候, 按照标准键盘布局的位置,出现对应键位的动画特效

当前为 2017-01-18 提交的版本,查看 最新版本

// ==UserScript==
// @name          敲起来([日语假名]按照标准键盘布局显示对应位置)
// @description   当你在敲击键盘的时候, 按照标准键盘布局的位置,出现对应键位的动画特效
// @version       0.5.0.1
// @author        胡朝旭
// @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/94864-%E8%83%A1%E6%9C%9D%E6%97%AD-rory
// @license           The MIT License (MIT); http://opensource.org/licenses/MIT
// ==/UserScript==

(function ($) {
    let cursor = {
        x: 0,
        y: 0
    };
    let bianju=50;
	//小于30可能因为字体不能再变小而造成排版混乱
    let wh={
        w:0,
        h:0
    };
    let keyboardMap = [
        //键位,x坐标,y坐标,高比例,宽比例
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["CANCEL",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["HELP",0,1,1,1],
        ["",0,1,1,1],
        ["BACK SPACE",5.5,0,1,2],
        ["TAB↹",-7.5,1,1,1.5],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["CLEAR",0,1,1,1],
        ["↲Enter",5.5,2,1,2],
        ["ENTER SPECIAL",0,1,1,1],
        ["",0,1,1,1],
        ["⇑Shft",-7.5,3,1,2],
        ["Ctrl",-7.5,4,1,1],
        ["Alt",-5,4,1,1],
        ["PAUSE",0,1,1,1],
        ["大/小 写",-7.5,2,1,1.8],
        ["KANA",0,1,1,1],
        ["EISU",0,1,1,1],
        ["JUNJA",0,1,1,1],
        ["FINAL",0,1,1,1],
        ["HANJA",0,1,1,1],
        ["",0,1,1,1],
        ["Esc",-8.5,0,1,1],
        ["CONVERT",0,1,1,1],
        ["NONCONVERT",0,1,1,1],
        ["ACCEPT",0,1,1,1],
        ["MODECHANGE",0,1,1,1],
        ["空格",-3.5,4,1,5.5],
        ["PAGE UP",10.5,0,1,1],
        ["PAGE DOWN",10.5,1,1,1],
        ["END",9.5,1,1,1],
        ["HOME",9.5,0,1,1],
        ["左",8.5,4,1,1],
        ["上",9.5,3,1,1],
        ["右",10.5,4,1,1],
        ["下",9.5,4,1,1],
        ["SELECT",0,1,1,1],
        ["PRINT",0,1,1,1],
        ["EXECUTE",0,1,1,1],
        ["PRINTSCREEN",0,1,1,1],
        ["INSERT",8.5,0,1,1],
        ["DELETE",8.5,1,1,1],
        ["",0,1,1,1],
        ["わ(ワ) を(ヲ)",2.5,0,1,1],
        ["ぬ(ヌ)",-6.5,0,1,1],
        ["ふ(フ)",-5.5,0,1,1],
        ["あ(ア) あ",-4.5,0,1,1],
        ["う(ウ) う",-3.5,0,1,1],
        ["え(エ) え",-2.5,0,1,1],
        ["お(オ) お",-1.5,0,1,1],
        ["や(ヤ) や",-0.5,0,1,1],
        ["ゆ(ユ) ゆ",0.5,0,1,1],
        ["よ(ヨ) よ",1.5,0,1,1],
        ["COLON",0,1,1,1],
        ["SEMICOLON",0,1,1,1],
        ["LESS THAN",0,1,1,1],
        ["EQUALS",0,1,1,1],
        ["GREATER THAN",0,1,1,1],
        ["QUESTION MARK",0,1,1,1],
        ["AT",0,1,1,1],
        ["ち(チ)",-5.7,2,1,1],
        ["こ(コ)",-1,3,1,1],
        ["そ(ソ)",-3,3,1,1],
        ["し(シ)",-3.7,2,1,1],
        ["い(イ)",-4,1,1,1],
        ["は(ハ)",-2.7,2,1,1],
        ["き(キ)",-1.7,2,1,1],
        ["く(ク)",-0.7,2,1,1],
        ["に(ニ)",1,1,1,1],
        ["ま(マ)",0.3,2,1,1],
        ["の(ノ)",1.3,2,1,1],
        ["り(リ)",2.3,2,1,1],
        ["も(モ)",1,3,1,1],
        ["み(ミ)",0,3,1,1],
        ["ら(ラ)",2,1,1,1],
        ["せ(セ)",3,1,1,1],
        ["た(タ)",-6,1,1,1],
        ["す(ス)",-3,1,1,1],
        ["と(ト)",-4.7,2,1,1],
        ["か(カ)",-2,1,1,1],
        ["な(ナ)",0,1,1,1],
        ["ひ(ヒ)",-2,3,1,1],
        ["て(テ)",-5,1,1,1],
        ["さ(サ)",-4,3,1,1],
        ["ん(ン)",-1,1,1,1],
        ["つ(ツ)",-5,3,1,1],
        ["OS KEY",-6,4,1,1],
        ["",0,1,1,1],
        ["CONTEXT MENU",0,1,1,1],
        ["",0,1,1,1],
        ["SLEEP",0,1,1,1],
        ["NUM 0",12.5,4,1,2],
        ["NUM 1",12.5,3,1,1],
        ["NUM 2",13.5,3,1,1],
        ["NUM 3",14.5,3,1,1],
        ["NUM 4",12.5,2,1,1],
        ["NUM 5",13.5,2,1,1],
        ["NUM 6",14.5,2,1,1],
        ["NUM 7",12.5,1,1,1],
        ["NUM 8",13.5,1,1,1],
        ["NUM 9",14.5,1,1,1],
        ["×",14.5,0,1,1],
        ["+",15.5,1,2,1],
        ["SEPARATOR",0,1,1,1],
        ["-",15.5,0,1,1],
        [".",14.5,4,1,1],
        ["÷",13.5,0,1,1],
        ["F1",-10,1,1,1],
        ["F2",-9,1,1,1],
        ["F3",-8,1,1,1],
        ["F4",-7,1,1,1],
        ["F5",-5.5,1,1,1],
        ["F6",-4.5,1,1,1],
        ["F7",-3.5,1,1,1],
        ["F8",-1,1,1,1],
        ["F9",-1,1,1,1],
        ["F10",0,1,1,1],
        ["F11",4.5,0,1,1],
        ["F12",5.5,0,1,1],
        ["F13",0,1,1,1],
        ["F14",0,1,1,1],
        ["F15",0,1,1,1],
        ["F16",0,1,1,1],
        ["F17",0,1,1,1],
        ["F18",0,1,1,1],
        ["F19",0,1,1,1],
        ["F20",0,1,1,1],
        ["F21",0,1,1,1],
        ["F22",0,1,1,1],
        ["F23",0,1,1,1],
        ["F24",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["NUM LOCK",12.5,0,1,1],
        ["SCROLL LOCK",0,1,1,1],
        ["WIN OEM FJ JISHO",0,1,1,1],
        ["WIN OEM FJ MASSHOU",0,1,1,1],
        ["WIN OEM FJ TOUROKU",0,1,1,1],
        ["WIN OEM FJ LOYA",0,1,1,1],
        ["WIN OEM FJ ROYA",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["CIRCUMFLEX",0,1,1,1],
        ["EXCLAMATION",0,1,1,1],
        ["DOUBLE QUOTE",0,1,1,1],
        ["HASH",0,1,1,1],
        ["DOLLAR",0,1,1,1],
        ["PERCENT",0,1,1,1],
        ["AMPERSAND",0,1,1,1],
        ["UNDERSCORE",0,1,1,1],
        ["OPEN PAREN",0,1,1,1],
        ["CLOSE PAREN",0,1,1,1],
        ["ASTERISK",0,1,1,1],
        ["PLUS",0,1,1,1],
        ["PIPE",0,1,1,1],
        ["HYPHEN MINUS",0,1,1,1],
        ["OPEN CURLY BRACKET",0,1,1,1],
        ["CLOSE CURLY BRACKET",0,1,1,1],
        ["TILDE",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["VOLUME MUTE",0,1,1,1],
        ["VOLUME DOWN",0,1,1,1],
        ["VOLUME UP",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["れ(レ)",3.3,2,1,1],
        ["へ(ヘ)",4.5,0,1,1],
        ["ね(ネ)、",2,3,1,1],
        ["ほ(ホ)",3.5,0,1,1],
        ["る(ゥ)。",3,3,1,1],
        ["め(メ)・",4,3,1,1],
        ["ろ(ロ)",-7.5,0,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["゛(濁点)",4,1,1,1],
        ["む(ム)",6,1,1,1.5],
        ["゜(半濁点)",5,1,1,1],
        ["け(ケ)",4.3,2,1,1],
        ["",0,1,1,1],
        ["META",0,1,1,1],
        ["ALTGR",0,1,1,1],
        ["",0,1,1,1],
        ["WIN ICO HELP",0,1,1,1],
        ["WIN ICO 00",0,1,1,1],
        ["",0,1,1,1],
        ["WIN ICO CLEAR",0,1,1,1],
        ["",0,1,1,1],
        ["",0,1,1,1],
        ["WIN OEM RESET",0,1,1,1],
        ["WIN OEM JUMP",0,1,1,1],
        ["WIN OEM PA1",0,1,1,1],
        ["WIN OEM PA2",0,1,1,1],
        ["WIN OEM PA3",0,1,1,1],
        ["WIN OEM WSCTRL",0,1,1,1],
        ["WIN OEM CUSEL",0,1,1,1],
        ["WIN OEM ATTN",0,1,1,1],
        ["WIN OEM FINISH",0,1,1,1],
        ["WIN OEM COPY",0,1,1,1],
        ["WIN OEM AUTO",0,1,1,1],
        ["WIN OEM ENLW",0,1,1,1],
        ["WIN OEM BACKTAB",0,1,1,1],
        ["ATTN",0,1,1,1],
        ["CRSEL",0,1,1,1],
        ["EXSEL",0,1,1,1],
        ["EREOF",0,1,1,1],
        ["PLAY",0,1,1,1],
        ["ZOOM",0,1,1,1],
        ["",0,1,1,1],
        ["PA1",0,1,1,1],
        ["WIN OEM CLEAR",0,1,1,1],
        ["",0,1,1,1]

    ];

    let mouseMap = [
        ["左键",-1.5,-1,1,1],
        ["中键",-0.5,-1,1,1],
        ["右键",0.5,-1,1,1]
    ];

    function createEle({key, color = '#555', pageX, pageY}) {
        let $span = $(`<span>${key}</span>`)
        .css({
            textalign:"right",
            position: "absolute",
            zIndex: 999999999,
            top: pageY + "px",
            left: pageX + "px",
            display: "inline-block",
            fontSize: bianju/2.5,
            height:wh.h,
            width:wh.w,
            color: color,
            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: "-="+bianju
            }, 1500, 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;
    });

    $(window).on('keyup', function (event) {
        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)

        });      
    });



    $(window).mousedown(function (event) {
        let key = mouseMap[event.which-1][0];
        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)
        });

    });

})(window.jQuery.noConflict(true));

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址