这个键盘用html+js+css搞出来的，做这个没什么目的，纯粹觉得好玩。

现在暂时的功能有：

1、可按键跟踪

2、可大小写切换

3、可鼠标点击输入

4、可移动键盘位置

可拓展功能有：

1、可改变键盘大小

2、可改变主题

3、对某些按键添加事件

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

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

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": "}" };

58         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": "|" };

59         var keyboardLetterZ = { "16": "Shift", "90": "Z", "88": "X", "67": "C", "86": "V", "66": "B", "78": "N", "77": "M", "188": "", "191": "?" };

60         var keyboardSpaceBar = { "32": "Space", "": "Tim" };

61         var key = "";

62     }

63     $.each(keyboardNum, function (key, value) {

64         if (value != "Backspace") {

65             key = $('

' + value + '

');

66             $("#keyboardNum").append(key);

67         }

68         else {

69             key = $('

' + value + '

');

70             $("#keyboardNum").append(key);

71         }

72     });

73

74     $.each(keyboardLetterQ, function (key, value) {

75         key = $('

' + value + '

');

76         $("#keyboardLetterQ").append(key);

77     });

78

79     $.each(keyboardLetterA, function (key, value) {

80         if (value != "Caps Lock") {

81             key = $('

' + value + '

');

82             $("#keyboardLetterA").append(key);

83         }

84         else {

85             key = $('

' + value + '

');

86             $("#keyboardLetterA").append(key);

87         }

88     });

89

90     $.each(keyboardLetterZ, function (key, value) {

91         if (value != "Shift") {

92             key = $('

' + value + '

');

93             $("#keyboardLetterA").append(key);

94         }

95         else {

96             key = $('

' + value + '

');

97             $("#keyboardLetterA").append(key);

98         }

99     });

100

101     $.each(keyboardSpaceBar, function (key, value) {

102         if (value != "Space") {

103             key = $('

' + value + '

');

104             $("#keyboardSpaceBar").append(key);

105         }

106         else {

107             key = $('

' + value + '

');

108             $("#keyboardSpaceBar").append(key);

109         }

110     });

111

112     addMouseClickEvent();

113

114

115 }

116

117 //监听鼠标点击事件

118 function addMouseClickEvent() {

119     $("#close").click(function () {

120         closeKeyboard()

121     });

122

123     $("p[name='key']").hover(function () {

124         $(this).css("background-color", "Gray");

125     }, function () {

126         $(this).css("background-color", "White");

127     }).click(function () {

128         var thisValue = $(this).attr("value");

129         var ID = $("#state").val();

130         switch (thisValue) {

131             case "": //"

132                 $("#" + ID).val($("#" + ID).val() + """);

133                 if ($("#shift").attr("checked") == true) {

134                     if ($("#capsLock").attr("checked") != true) {

135                         drawKeyboard("lower");

136                     }

137                     $("#shift").attr("checked", false);

138                 }

139                 break;

140             case "Shift":

141                 $("#shift").attr("checked", $("#shift").attr("checked") == true ? false : true);

142                 if ($("#shift").attr("checked") == true) {

143                     drawKeyboard("upper")

144                 }

145                 else {

146                     if ($("#capsLock").attr("checked") != true) {

147                         drawKeyboard("lower");

148                     }

149                 }

150                 break;

151             case "Caps Lock":

152                 $("#capsLock").attr("checked", $("#capsLock").attr("checked") == true ? false : true);

153                 $("#capsLock").attr("checked") == true ? drawKeyboard("upper") : drawKeyboard("lower");

154                 $("#shift").attr("checked", false)

155                 break;

156             case "Space":

157                 $("#" + ID).val($("#" + ID).val() + " ");

158                 break;

159             case "Backspace":

160                 $("#" + ID).val($("#" + ID).val().substring(0, $("#" + ID).val().length - 1));

161                 break;

162             default:

163                 $("#" + ID).val($("#" + ID).val() + thisValue);

164                 if ($("#shift").attr("checked") == true) {

165                     if ($("#capsLock").attr("checked") != true) {

166                         drawKeyboard("lower");

167                     }

168                     $("#shift").attr("checked", false);

169                 }

170

171                 break;

172         }

173         $("#" + ID).focus();

174     });

175 }

176

177

178 //监听键盘事件

179 function addKeydownEvent() {

180     $("html").keydown(function (event) {

181         var realkey = String.fromCharCode(event.keyCode);

182

183         //特殊键

184         if (event.keyCode == 32) { realkey = "Space" }

185         if (event.keyCode == 13) { realkey = "Enter" }

186         if (event.keyCode == 27) { realkey = " Esc" }

187         if (event.keyCode == 16) {

188             realkey = "Shift";

189             $("#shift").attr("checked", $("#shift").attr("checked") == true ? false : true);

190             if ($("#shift").attr("checked") == true) {

191                 drawKeyboard("upper")

192             }

193             else {

194                 if ($("#capsLock").attr("checked") != true) {

195                     drawKeyboard("lower");

196                 }

197             }

198         }

199         if (event.keyCode == 17) { realkey = " Ctrl" }

200         if (event.keyCode == 18) { realkey = "Alt" }

201         if (event.keyCode == 8) { realkey = "Backspace" }

202         if (event.keyCode == 20) { realkey = "Caps Lock"; $("#capsLock").attr("checked", $("#capsLock").attr("checked") == true ? false : true); $("#capsLock").attr("checked") == true ? drawKeyboard("upper") : drawKeyboard("lower"); }

203

204

205         $("p[name='key']").css("background-color", "White")

206         $("p[key=" + event.keyCode + "]").css("background-color", "Gray");

207

208         //如果按了shif再按其他键并且这个键不是shif键盘变回小写

209         //如果capsLock选中了键盘就不用变回小写

210         if ($("#shift").attr("checked") == true && event.keyCode != 16) {

211             if ($("#capsLock").attr("checked") != true) {

212                 drawKeyboard("lower");

213             }

214             $("#shift").attr("checked", false);

215         }

216

217     });

218 }

219

220 //打开键盘

221 function openKeyboard(ID) {

222     $("#keyboard").css("visibility", "visible");

223     $("#state").val(ID);

224 }

225

226 //关闭键盘

227 function closeKeyboard() {

228     $("#keyboard").css("visibility", "hidden")

229 }

230

231

232 $(function () {

233     var pKeyBoard = '

Shift

Caps Lock

234     $("body").append(pKeyBoard);

235     drawKeyboard("lower");

236     addKeydownEvent();

237     $("#keyboard").css("visibility", "hidden");

238     var drag = new dragMing("#keyboard", "#keyboard");

239

240 })

241

242

1 .keyboard

2 {

3     width:800px;

4     height:300px;

5     text-align:center;

6     position:absolute;

7 }

8

9 .keyboard p

10 {

11     height:50px;

12 line-height:50px;

13      float:left;

14 }

15

16 #keyboardHead

17 {

18 width:800px;

19     position:relative;

20 }

21

22 #keyboardLetterQ

23 {

24     width:800px;

25     position:relative;

26     left:75px;

27 }

28

29 #keyboardSpaceBar 30 {

31     width:800px;

32     position:relative;

33     left:200px;

34     top:52px;

35 }

36

37 .simpleKey

38 {

39     width:50px;

40     border:1px solid black;

41 }

42

43 .enterKey

44 {

45     width:100px;

46     height:100px;

47     border:1px solid black;

48 }

49

50 .shiftKey

51 {

52     width:115px;

53     border:1px solid black;

54 }

55

56 .backspaceKey

57 {

58     width:120px;

59     border:1px solid black;

60 }

61

62 .capslockKey

63 {

64     width:90px;

65     border:1px solid black;

66 }

67

68 .spaceKey

69 {

70     width:300px;

71     border:1px solid black;

72 }

73

74 .keyboard p[name="key"]:hover{

75     background: Gray;

76 }

77

78 .keyboard p[name="key"]

79 {

80     cursor:pointer;

81 }

作者：tbwshc

html 游戏键盘,用html+js+css做一个模拟键盘相关推荐

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

    1 //移动键盘 2 functiondragMing(idORclass1, idORclass2) {3 var obj = this; //这里的this是指dragMing对象么 4 this ...

  2. JS + CSS 做一个简易九宫格抽奖

    目录 1.CSS样式 2.JS动作 大概做出来就是这个样子,alert的弹窗样式我也没改,就默认的. 1.CSS样式 样式大概分以下方面: 创建外框及内框样式: 8个奖品小方格和中间按钮小方格: 奖品 ...

  3. 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...

    用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...

  4. 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~

    用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...

  5. 使用构造方法 重载 Scanner键盘录入的方式，做一个两个int类型的相加 和三个double类型的计算器

    import java.util.Scanner; public class Calculator { // 使用构造方法 重载 Scanner键盘录入的方式,做一个两个int类型的相加 和三个dou ...

  6. 使用css做一个右向的三角箭头

    使用css做一个右向的三角箭头:如图 使用css 的border 属性,将下.左边框设置宽度为零,使用transfrom属性将图案旋转 45度.即可得到三角箭头 .icon-v-right {widt ...

  7. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  8. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  9. 用html和css做一个旋转的正方体

    用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...

最新文章

  1. 虚幻引擎的数学知识学习教程 Math for Unreal Engine (Early Preview)
  2. ajax传递数组 php,jQuery.ajax向后台传递数组问题如何解决
  3. $cfg_dbtype = mysql_Druid连接池二（学习笔记）
  4. Android-应用性能测试
  5. sqlite3 select查询一列_Python成为专业人士笔记–Sqlite3 模块
  6. 分布式 RPC架构简单理解
  7. spark 数据存储
  8. Applese 的大奖
  9. linux输入命令对话框,linux里命令的对话框whiptail
  10. java实现手机开关机_Android 系统重启与关机：Java 代码实现
  11. mahout 安装编译
  12. 团队建设及管理上的举措_为什么在副项目上工作是您作为开发人员的最佳举措...
  13. LNMP(Linux、Nginx、MySQL、PHP)安装部署
  14. Git最好的CRLF（回车，换行）处理策略是什么？
  15. 【NOIP2014】【Luogu2118】比例简化（枚举）
  16. centos7安装mysql客户端
  17. Windows XP SP3需要安装KB888111补丁解决方法
  18. Win10桌面美化（桌面数字时钟，悬浮侧边栏、透明任务栏、底部居中软件图标）
  19. JavaScript调用pc和手机摄像头
  20. 回归中的相关度和决定系数及应用

热门文章

  1. 生成离线报告-java将白色背景透明和裁减掉白色背景部分
  2. 实验二——————路由器口令配置
  3. 跨境电商必看：亚马逊数据采集规则推荐
  4. 笨方法学Python—ex42:对象、类及从属关系
  5. 城乡规划编制资质很多地区已经开通新办了，那你知道怎么办吗？
  6. 成功入职字节跳动，分享我的八面面经心得！
  7. left join 和 left outer join (可解决多个表left join的问题)
  8. 面试题：“你的职业规划是什么？”
  9. 手把手安排 --- JavaH5微信支付(移动端浏览器H5拉起微信支付)
  10. 【渝粤教育】电大中专混凝土结构题库作业 题库