当前位置:编程学习 > JS >>

用html+js+css做一个模拟键盘

 这个键盘用html+js+css搞出来的,做这个没什么目的,纯粹觉得好玩。
    现在暂时的功能有:

    1、可按键跟踪

    2、可大小写切换

    3、可鼠标点击输入

    4、可移动键盘位置

    可拓展功能有:

    1、可改变键盘大小

    2、可改变主题

    3、对某些按键添加事件

    4、结合html5的canvas弄个打字游戏啥的(想想就有趣^_^)

    ps(本人js和css都是菜鸟一枚,不喜可以喷,但请勿涉及家人)

 

html

 

<html xmlns="www.zzzyk.com">
<head>
    <title></title>
    <link href="Css/keyboard.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/keyBoard.js" type="text/javascript"></script>
    
</head>
<body>
    <input id="state" type="hidden" />
    <input id="txtID" type="text" onclick='openKeyboard("txtID");' />
    <div id="keyboardParent">
    </div>
</body>
</html>
 

keytBoard.js

View Code

  1 //移动键盘
  2 function dragMing(idORclass1, idORclass2) {
  3     var obj = this; //这里的this是指dragMing对象么
  4     this.idORclass1 = idORclass1; //给dragMing的idORclass1赋值
  5     this.idORclass2 = idORclass2; //给dragMing的idORclass2赋值
  6     this.deltaX = 0;
  7     this.deltaY = 0;
  8
  9     function dragStart(dragEvent) {
 10         obj.deltaX = dragEvent.clientX - $(obj.idORclass2).offset().left;
 11         obj.deltaY = dragEvent.clientY - $(obj.idORclass2).offset().top;
 12         $(document).bind("mousemove", dragMove);
 13         $(document).bind("mouseup", dragStop);
 14         dragEvent.preventDefault();
 15
 16     }
 17     function dragMove(dragEvent) {
 18         $(obj.idORclass2).css({
 19             "left": (dragEvent.clientX - obj.deltaX) + "px",
 20             "top": (dragEvent.clientY - obj.deltaY) + "px"
 21         })
 22         dragEvent.preventDefault();
 23
 24     }
 25     function dragStop() {
 26         $(document).unbind("mousemove", dragMove);
 27         $(document).unbind("mouseup", dragStop);
 28
 29     }
 30
 31     $(document).ready(function () {
 32         $(obj.idORclass1).bind("mousedown", dragStart);
 33
 34     })
 35 }
 36
 37
 38
 39 //绘制键盘
 40 function drawKeyboard(type) {
 41     $("#keyboardNum").empty();
 42     $("#keyboardLetterQ").empty();
 43     $("#keyboardLetterA").empty();
 44     $("#keyboardLetterZ").empty();
 45     $("#keyboardSpaceBar").empty();
 46
 47     if (type == "lower") {
 48         var keyboardNum = { "192": "`", "49": "1", "50": "2", "51": "3", "52": "4", "53": "5", "54": "6", "55": "7", "56": "8", "57": "9", "48": "0", "189": "-", "187": "=", "8": "Backspace" };
 49         var keyboardLetterQ = { "81": "q", "87": "w", "69": "e", "82": "r", "84": "t", "89": "y", "85": "u", "73": "i", "79": "o", "80": "p", "219": "[", "221": "]" };
 50         var keyboardLetterA = { "20": "Caps Lock", "65": "a", "83": "s", "68": "d", "70": "f", "71": "g", "72": "h", "74": "j", "75": "k", "76": "l", "186": ";", "222": "'", "220": "\\" };
 51         var keyboardLetterZ = { "16": "Shift", "90": "z", "88": "x", "67": "c", "86": "v", "66": "b", "78": "n", "77": "m", "188": ",", "190": ".", "191": "/" };
 52         var keyboardSpaceBar = { "32": "Space", "": "Tim" };
 53         var key = "";
 54     }
 55     else {
 56         var keyboardNum = { "192": "~", "49": "!", "50": "@", "51": "#", "52": "$", "53": "%", "54": "^", "55": "&", "56": "*", "57": "(", "48": ")", "189": "_", "187": "+", "8": "Backspace" };
 57         var keyboardLetterQ = { "81": "Q", "87": "W", "69": "E", "82": "R", "84": "T", "89": "Y", "85": "U", "73": "I", "79": "O", "80": "p", "219": "{", "221

补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,