2010-08-02 51 views

回答

2

yup !!!

你一定可以實現一個簡單的虛擬鍵盤的一個網站...只需要數字鍵盤(0-9)...

請找到下面的代碼:

<HTML><HEAD><SCRIPT type="text/javascript">function VNumpad(container_id, callback_ref, font_name, font_size, 
       font_color, bg_color, key_color, border_color, 
       show_click, click_font_color, click_bg_color, 
       click_border_color, do_embed, do_gap) { 
return this._construct(container_id, callback_ref, font_name, font_size, 
         font_color, bg_color, key_color, border_color, 
         show_click, click_font_color, click_bg_color, 
         click_border_color, do_embed, do_gap); } VNumpad.kbArray = []; VNumpad.prototype = { 

_setup_event: function(elem, eventType, handler) 
{ 
    return (elem.attachEvent ? elem.attachEvent("on" + eventType, handler) : ((elem.addEventListener) ? elem.addEventListener(eventType, handler, false) : null)); 
}, 

_start_flash: function(in_el) 
{ 
    function getColor(str, posOne, posTwo) 
    { 
    if(/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(str)) // try to detect Mozilla-style rgb value. 
    { 
     switch(posOne) 
     { 
     case 1: return parseInt(RegExp.$1, 10); 
     case 2: return parseInt(RegExp.$2, 10); 
     case 3: return parseInt(RegExp.$3, 10); 
     default: return 0; 
     } 
    } 
    else // standard (#xxxxxx or #xxx) way 
     return str.length == 4 ? parseInt(str.substr(posOne, 1) + str.substr(posOne, 1), 16) : parseInt(str.substr(posTwo, 2), 16); 
    } 

    function getR(color_string) 
    { return getColor(color_string, 1, 1); } 

    function getG(color_string) 
    { return getColor(color_string, 2, 3); } 

    function getB(color_string) 
    { return getColor(color_string, 3, 5); } 

    var el = in_el.time ? in_el : (in_el.company && in_el.company.time ? in_el.company : null); 
    if(el) 
    { 
    el.time = 0; 
    clearInterval(el.timer); 
    } 

    var vkb = this; 
    var ftc = vkb.fontcolor, bgc = vkb.keycolor, brc = vkb.bordercolor; 

    // Special fixes for simple/dead/modifier keys: 

    if(in_el.dead) 
    ftc = vkb.deadcolor; 

    if(((in_el.innerHTML == "Shift") && vkb.Shift) || ((in_el.innerHTML == "Caps") && vkb.Caps) || ((in_el.innerHTML == "AltGr") && vkb.AltGr)) 
    bgc = vkb.lic; 

    // Extract base color values: 
    var fr = getR(ftc), fg = getG(ftc), fb = getB(ftc); 
    var kr = getR(bgc), kg = getG(bgc), kb = getB(bgc); 
    var br = getR(brc), bg = getG(brc), bb = getB(brc); 

    // Extract flash color values: 
    var f_r = getR(vkb.cfc), f_g = getG(vkb.cfc), f_b = getB(vkb.cfc); 
    var k_r = getR(vkb.cbg), k_g = getG(vkb.cbg), k_b = getB(vkb.cbg); 
    var b_r = getR(vkb.cbr), b_g = getG(vkb.cbr), b_b = getB(vkb.cbr); 

    var _shift_colors = function() 
    { 
    function dec2hex(dec) 
    { 
     var hexChars = "ABCDEF"; 
     var a = dec % 16; 
     var b = (dec - a)/16; 

     return hexChars.charAt(b) + hexChars.charAt(a) + ""; 
    } 

    in_el.time = !in_el.time ? 10 : (in_el.time - 1); 

    function calc_color(start, end) 
    { return (end - (in_el.time/10) * (end - start)); } 

    var t_f_r = calc_color(f_r, fr), t_f_g = calc_color(f_g, fg), t_f_b = calc_color(f_b, fb); 
    var t_k_r = calc_color(k_r, kr), t_k_g = calc_color(k_g, kg), t_k_b = calc_color(k_b, kb); 
    var t_b_r = calc_color(b_r, br), t_b_g = calc_color(b_g, bg), t_b_b = calc_color(b_b, bb); 

    in_el.style.color = "#" + dec2hex(t_f_r) + dec2hex(t_f_g) + dec2hex(t_f_b); 
    in_el.style.borderColor = "#" + dec2hex(t_b_r) + dec2hex(t_b_g) + dec2hex(t_b_b); 
    in_el.style.backgroundColor = "#" + dec2hex(t_k_r) + dec2hex(t_k_g) + dec2hex(t_k_b); 

    if(!in_el.time) 
    { 
     clearInterval(in_el.timer); 
     return; 
    } 
    }; 

    _shift_colors(); 

    in_el.timer = window.setInterval(_shift_colors, 50); 
}, 

_setup_style: function(obj, top, left, width, height, position, border_color, bg_color, text_align, line_height, font_size, font_weight, padding_left, padding_right) 
{ 
    var os = obj.style; 

    if(top) os.top = top; 
    if(left) os.left = left; 
    if(width) os.width = width; 
    if(height) os.height = height; 

    if(position) os.position = position; 

    if(border_color) os.border = "1px solid " + border_color; 
    if(bg_color) os.backgroundColor = bg_color; 

    if(text_align) os.textAlign = text_align; 
    if(line_height) os.lineHeight = line_height; 
    if(font_size) os.fontSize = font_size; 

    os.fontWeight = font_weight || "bold"; 

    if(padding_left) os.paddingLeft = padding_left; 
    if(padding_right) os.paddingRight = padding_right; 
}, 

_setup_key: function(parent, id, top, left, width, height, border_color, bg_color, text_align, line_height, font_size, font_weight, padding_left, padding_right) 
{ 
    var _id = this.Cntr.id + id; 
    var exists = document.getElementById(_id); 

    var key = exists ? exists.parentNode : document.createElement("DIV"); 
    this._setup_style(key, top, left, width, height, "absolute"); 

    var key_sub = exists || document.createElement("DIV"); 
    key.appendChild(key_sub); parent.appendChild(key); 

    this._setup_style(key_sub, "", "", "", line_height, "relative", border_color, bg_color, text_align, line_height, font_size, font_weight, padding_left, padding_right); 
    key_sub.id = _id; 

    if(!exists) this._setup_event(key_sub, 'mouseup', this._generic_callback_proc); 

    return key_sub; 
}, 

_findX: function(obj) 
{ return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetLeft) : 0; }, 

_findY: function(obj) 
{ return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetTop) : 0; }, 

_findW: function(obj) 
{ return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetWidth) : 0; }, 

_findH: function(obj) 
{ return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetHeight) : 0; }, 

_construct: function(container_id, callback_ref, font_name, font_size, font_color, bg_color, key_color, border_color, 
        show_click, click_font_color, click_bg_color, click_border_color, do_embed, do_gap) 
{ 
    var exists = (this.Cntr != undefined), ct = exists ? this.Cntr : document.getElementById(container_id); 
    var changed = (font_size && (font_size != this.fontsize)); 

    this._Callback = ((typeof(callback_ref) == "function") && ((callback_ref.length == 1) || (callback_ref.length == 2))) ? callback_ref : (this._Callback || null); 

    var ff = font_name || this.fontname || ""; 
    var fs = font_size || this.fontsize || "14px"; 

    var fc = font_color || this.fontcolor || "#000"; 
    var bg = bg_color  || this.bgcolor  || "#FFF"; 
    var kc = key_color || this.keycolor || "#FFF"; 
    var bc = border_color || this.bordercolor || "#777"; 

    this.cfc = click_font_color || this.cfc || "#CC3300"; 
    this.cbg = click_bg_color  || this.cbg || "#FF9966"; 
    this.cbr = click_border_color || this.cbr || "#CC3300"; 

    this.sc = (show_click == undefined) ? ((this.sc == undefined) ? false : this.sc) : show_click; 
    this.gap = (do_gap != undefined) ? (do_gap ? 1 : -1) : (this.gap || 1); 

    this.fontname = ff, this.fontsize = fs, this.fontcolor = fc; 
    this.bgcolor = bg, this.keycolor = kc, this.bordercolor = bc; 

    if(!exists) 
    { 
    this.Cntr = ct, this.LastKey = null; 

    VNumpad.kbArray[container_id] = this; 
    } 

    var kb = exists ? ct.childNodes[0] : document.createElement("DIV"); 

    if(!exists) 
    { 
    ct.appendChild(kb); 
    ct.style.display = "block"; 
    ct.style.zIndex = 999; 

    if(do_embed) 
     ct.style.position = "relative"; 
    else 
    { 
     ct.style.position = "absolute"; 

     var initX = 0, initY = 0, ct_ = ct; 
     if(ct_.offsetParent) 
     { 
     while (ct_.offsetParent) 
     { 
      initX += ct_.offsetLeft; 
      initY += ct_.offsetTop; 

      ct_ = ct_.offsetParent; 
     } 
     } 
     else if (ct_.x) 
     { 
     initX += ct_.x; 
     initY += ct_.y; 
     } 

     ct.style.top = initY + "px", ct.style.left = initX +"px"; 
    } 

    kb.style.position = "relative"; 
    kb.style.top  = "0px", kb.style.left = "0px"; 
    } 

    kb.style.border = "1px solid " + bc; 

    var kb_main = exists ? kb.childNodes[0] : document.createElement("DIV"), ks = kb_main.style; 
    if(!exists) 
    { 
    kb.appendChild(kb_main); 

    ks.position = "relative"; 
    ks.width = "1px"; 
    ks.cursor = "default"; 
    } 

    // Disable content selection: 
    this._setup_event(kb_main, "selectstart", function(event) { return false; }); 
    this._setup_event(kb_main, "mousedown", function(event) { if(event.preventDefault) event.preventDefault(); return false; }); 

    ks.fontFamily = ff, ks.backgroundColor = bg; 

    if(!exists || changed) 
    { 
    ks.width = this._create_numpad(container_id, kb_main); 
    ks.height = (this._findY(this.LastKey) + this._findH(this.LastKey) + this.gap) + "px"; 
    } 

    return this; 
}, 

_create_numpad: function(container_id, parent) 
{ 
    var c = "center", n = "normal", l = "left", gap = this.gap; 
    var fs = this.fontsize, kc = this.keycolor, bc = this.bordercolor; 

    var mag = parseFloat(fs)/14.0, cell = Math.floor(25.0 * mag); 
    var dcell = 2 * cell, dp = (dcell + 1) + "px", dp2 = (dcell - 1 - ((gap < 0) ? 2 : 0)) + "px"; 
    var cp = String(cell) + "px", lh = String(Math.floor(cell - 2.0)) + "px"; 

    var edge = gap + "px"; 

    var kb_pad_eur = this._setup_key(parent, "___pad_eur", gap + "px", edge, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_eur.innerHTML = "&#x20AC;"; 

    var edge_1 = (this._findX(kb_pad_eur) + this._findW(kb_pad_eur) + gap) + "px"; 

    var kb_pad_slash = this._setup_key(parent, "___pad_slash", gap + "px", edge_1, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_slash.innerHTML = "/"; 

    var edge_2 = (this._findX(kb_pad_slash) + this._findW(kb_pad_slash) + gap) + "px"; 

    var kb_pad_star = this._setup_key(parent, "___pad_star", gap + "px", edge_2, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_star.innerHTML = "*"; 

    var edge_3 = (this._findX(kb_pad_star) + this._findW(kb_pad_star) + gap) + "px"; 

    var kb_pad_minus = this._setup_key(parent, "___pad_minus", gap + "px", edge_3, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_minus.innerHTML = "-"; 

    this.kbpM = this._findX(kb_pad_minus) + this._findW(kb_pad_minus) + gap; 

    var prevH = this._findH(kb_pad_eur), edge_Y = (this._findY(kb_pad_eur) + prevH + gap) + "px"; 

    var kb_pad_7 = this._setup_key(parent, "___pad_7", edge_Y, edge, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_7.innerHTML = "7"; 

    var kb_pad_8 = this._setup_key(parent, "___pad_8", edge_Y, edge_1, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_8.innerHTML = "8"; 

    var kb_pad_9 = this._setup_key(parent, "___pad_9", edge_Y, edge_2, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_9.innerHTML = "9"; 

    var kb_pad_plus = this._setup_key(parent, "___pad_plus", edge_Y, edge_3, cp, dp, bc, kc, c, dp2, fs); 
    kb_pad_plus.innerHTML = "+"; 

    edge_Y = (this._findY(kb_pad_7) + prevH + gap) + "px"; 

    var kb_pad_4 = this._setup_key(parent, "___pad_4", edge_Y, edge, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_4.innerHTML = "4"; 

    var kb_pad_5 = this._setup_key(parent, "___pad_5", edge_Y, edge_1, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_5.innerHTML = "5"; 

    var kb_pad_6 = this._setup_key(parent, "___pad_6", edge_Y, edge_2, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_6.innerHTML = "6"; 

    edge_Y = (this._findY(kb_pad_4) + prevH + gap) + "px"; 

    var kb_pad_1 = this._setup_key(parent, "___pad_1", edge_Y, edge, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_1.innerHTML = "1"; 

    var kb_pad_2 = this._setup_key(parent, "___pad_2", edge_Y, edge_1, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_2.innerHTML = "2"; 

    var kb_pad_3 = this._setup_key(parent, "___pad_3", edge_Y, edge_2, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_3.innerHTML = "3"; 

    var kb_pad_enter = this._setup_key(parent, "___pad_enter", edge_Y, edge_3, cp, dp, bc, kc, c, dp2, parseFloat(fs) * 0.643, n); 
    kb_pad_enter.innerHTML = "Enter"; 

    edge_Y = (this._findY(kb_pad_1) + prevH + gap) + "px"; 

    var kb_pad_0 = this._setup_key(parent, "___pad_0", edge_Y, edge, dp, cp, bc, kc, l, lh, fs, "", 7 * mag + "px"); 
    kb_pad_0.innerHTML = "0"; 

    var kb_pad_period = this._setup_key(parent, "___pad_period", edge_Y, edge_2, cp, cp, bc, kc, c, lh, fs); 
    kb_pad_period.innerHTML = "."; 

    this.LastKey = kb_pad_period; 

    return String(this._findX(kb_pad_minus) + this._findW(kb_pad_minus) + gap) + "px"; 
}, 

_generic_callback_proc: function(event) 
{ 
    var e = event || window.event; 
    var in_el = e.srcElement || e.target; 
    var container_id = in_el.id.substring(0, in_el.id.indexOf("___")); 

    var vpad = VNumpad.kbArray[container_id]; 

    if(vpad.sc) vpad._start_flash(in_el); 

    if(vpad._Callback) vpad._Callback(in_el.innerHTML, vpad.Cntr.id); 
}, 

SetParameters: function() 
{ 
    var l = arguments.length; 
    if(!l || (l % 2 != 0)) return false; 

    var p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10; 

    while(--l > 0) 
    { 
    var value = arguments[l]; 

    switch(arguments[l - 1]) 
    { 
     case "callback": 
     p0 = ((typeof(value) == "function") && ((value.length == 1) || (value.length == 2))) ? value : this._Callback; 
     break; 

     case "font-name": p1 = value; break; 
     case "font-size": p2 = value; break; 
     case "font-color": p3 = value; break; 
     case "base-color": p4 = value; break; 
     case "key-color": p5 = value; break; 

     case "border-color": p6 = value; break; 
     case "show-click": p7 = value; break; 

     case "click-font-color": p8 = value; break; 
     case "click-key-color": p9 = value; break; 
     case "click-border-color": p10 = value; break; 

     default: break; 
    } 

    l -= 1; 
    } 

    this._construct(this.Cntr.id, p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10); 

    return true; 
}, Show: function(value){ 
    var ct = this.Cntr.style; 
    ct.display = ((value == undefined) || (value == true)) ? "block" : ((value == false) ? "none" : ct.display); }}; </SCRIPT> <SCRIPT><!-- 

var opened = false, vkb = null, text = null, insertionS = 0, insertionE = 0; 

var userstr = navigator.userAgent.toLowerCase(); 
var isgecko = (userstr.indexOf('gecko') != -1) && (userstr.indexOf('applewebkit') == -1); 

function numpad_change() 
{ 
    document.getElementById("switch").innerHTML = (opened ? "Show numpad" : "Hide numpad"); 
    opened = !opened; 

    if(opened && !vkb) 
    { 
    vkb = new VNumpad("numpad",  // container's id 
         pad_callback, // reference to the callback function 
         "",   // font name ("" == system default) 
         "14px",  // font size in px 
         "#000",  // font color 
         "#FFF",  // keyboard base background color 
         "#FFF",  // keys' background color 
         "#777",  // border color 
         true,   // show key flash on click? (false by default) 
         "#CC3300", // font color for flash event 
         "#FF9966", // key background color for flash event 
         "#CC3300", // key border color for flash event 
         false,  // embed VNumpad into the page? 
         true);  // use 1-pixel gap between the keys? 

    } 
    else 
    vkb.Show(opened); 

    text = document.getElementById("textfield"); 
    text.focus(); 

    if(document.attachEvent) 
    text.attachEvent("onblur", backFocus); 
} 

function backFocus() 
{ 
    if(opened) 
    { 
    setRange(text, insertionS, insertionE); 

    text.focus(); 
    } 
} 

// Advanced callback function: 
// 
function pad_callback(ch) 
{ 
    var val = text.value; 

    switch(ch) 
    { 
    case "BackSpace": 
     if(val.length) 
     { 
     var span = null; 

     if(document.selection) 
      span = document.selection.createRange().duplicate(); 

     if(span && span.text.length > 0) 
     { 
      span.text = ""; 
      getCaretPositions(text); 
     } 
     else 
      deleteAtCaret(text); 
     } 

     break; 

    default: 
     insertAtCaret(text, (ch == "Enter" ? (window.opera ? '\r\n' : '\n') : ch)); 
    } 
} 

// This function retrieves the position (in chars, relative to 
// the start of the text) of the edit cursor (caret), or, if 
// text is selected in the TEXTAREA, the start and end positions 
// of the selection. 
// 
function getCaretPositions(ctrl) 
{ 
    var CaretPosS = -1, CaretPosE = 0; 

    // Mozilla way: 
    if(ctrl.selectionStart || (ctrl.selectionStart == '0')) 
    { 
    CaretPosS = ctrl.selectionStart; 
    CaretPosE = ctrl.selectionEnd; 

    insertionS = CaretPosS == -1 ? CaretPosE : CaretPosS; 
    insertionE = CaretPosE; 
    } 
    // IE way: 
    else if(document.selection && ctrl.createTextRange) 
    { 
    var start = end = 0; 
    try 
    { 
     start = Math.abs(document.selection.createRange().moveStart("character", -10000000)); // start 

     if (start > 0) 
     { 
     try 
     { 
      var endReal = Math.abs(ctrl.createTextRange().moveEnd("character", -10000000)); 

      var r = document.body.createTextRange(); 
      r.moveToElementText(ctrl); 
      var sTest = Math.abs(r.moveStart("character", -10000000)); 
      var eTest = Math.abs(r.moveEnd("character", -10000000)); 

      if ((ctrl.tagName.toLowerCase() != 'input') && (eTest - endReal == sTest)) 
      start -= sTest; 
     } 
     catch(err) {} 
     } 
    } 
    catch (e) {} 
    try 
    { 
     end = Math.abs(document.selection.createRange().moveEnd("character", -10000000)); // end 
     if(end > 0) 
     { 
     try 
     { 
      var endReal = Math.abs(ctrl.createTextRange().moveEnd("character", -10000000)); 

      var r = document.body.createTextRange(); 
      r.moveToElementText(ctrl); 
      var sTest = Math.abs(r.moveStart("character", -10000000)); 
      var eTest = Math.abs(r.moveEnd("character", -10000000)); 

      if ((ctrl.tagName.toLowerCase() != 'input') && (eTest - endReal == sTest)) 
      end -= sTest; 
     } 
     catch(err) {} 
     } 
    } 
    catch (e) {} 
    insertionS = start; 
    insertionE = end 
    } } function setRange(ctrl, start, end) { 
    if(ctrl.setSelectionRange) // Standard way (Mozilla, Opera, ...) 
    { ctrl.setSelectionRange(start, end); 
    } 
    else // MS IE 
    { 
    var range; 
    try 
    { range = ctrl.createTextRange(); 
    } 
    catch(e) 
    {try 
     { 
     range = document.body.createTextRange(); 
     range.moveToElementText(ctrl); 
     } 
     catch(e) 
     { 
     range = null; 
     } 
    } if(!range) return; 
    range.collapse(true); 
    range.moveStart("character", start); 
    range.moveEnd("character", end - start); 
    range.select(); 
    } 
    insertionS = start; 
    insertionE = end; 
}function deleteSelection(ctrl) { 
    if(insertionS == insertionE) return; var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value; 
    ctrl.value = tmp.substring(0, insertionS) + tmp.substring(insertionE, tmp.length); 
    setRange(ctrl, insertionS, insertionS);} 
function deleteAtCaret(ctrl)  { 
    // if(insertionE < insertionS) insertionE = insertionS; 
    if(insertionS != insertionE) 
    { 
    deleteSelection(ctrl); 
    return; 
    } 
    if(insertionS == insertionE) 
    insertionS = insertionS - 1; 
    var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value; 
    ctrl.value = tmp.substring(0, insertionS) + tmp.substring(insertionE, tmp.length); 
    setRange(ctrl, insertionS, insertionS); 
} // This function inserts text at the caret position: 
// 
function insertAtCaret(ctrl, val) 
{ 
    if(insertionS != insertionE) deleteSelection(ctrl); 

    if(isgecko && document.createEvent && !window.opera) 
    { 
    var e = document.createEvent("KeyboardEvent"); 

    if(e.initKeyEvent && ctrl.dispatchEvent) 
    { 
     e.initKeyEvent("keypress",  // in DOMString typeArg, 
         false,    // in boolean canBubbleArg, 
         true,    // in boolean cancelableArg, 
         null,    // in nsIDOMAbstractView viewArg, specifies UIEvent.view. This value may be null; 
         false,    // in boolean ctrlKeyArg, 
         false,    // in boolean altKeyArg, 
         false,    // in boolean shiftKeyArg, 
         false,    // in boolean metaKeyArg, 
         null,    // key code; 
         val.charCodeAt(0));// char code. 

     ctrl.dispatchEvent(e); 
    } 
    } 
    else 
    { 
    var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value; 
    ctrl.value = tmp.substring(0, insertionS) + val + tmp.substring(insertionS, tmp.length); 
    } setRange(ctrl, insertionS + val.length, insertionS + val.length);} //--><</SCRIPT>><</HEAD>><BODY> <P style="font-family:Tahoma;font-size:14px">Virtual keyboard/numpad installation.</P><TABLE border="0" width="60%"> <TR> 
<TD width="100px"><TEXTAREA id="textfield" rows="2" cols="50" onkeyup="getCaretPositions(this);" onclick="getCaretPositions(this);"></TEXTAREA></TD></TR></TABLE><P><A href="javascript:numpad_change()" onclick="javascript:blur()" id="switch" style="font-family:Tahoma;font-size:14px;text-decoration:none;border-bottom: 1px dashed #0000F0;color:#0000F0">Show numpad</A></P><DIV id="numpad"></DIV></BODY></HTML> 

你也可以通過將JS在一個單獨的文件中numpad.js

由於分離的JS和HTML代碼, 無