JavaWeb模拟键盘

最新推荐文章于 2024-07-16 15:41:31 发布

SunshineXu123

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量666

点赞数 2

分类专栏： JavaWeb 文章标签： html css js

本文链接：https://blog.csdn.net/SunshineXu123/article/details/53249203

版权

模拟键盘

功能

1. 实现跑马灯效果

2.实现闪屏效果

3.按下按键，点亮对应按键；松开按键，熄灭对应按键

4.按下按键，输出其对应显示值、ASCII值、字符值及大写字符值

显示效果

跑马灯

闪屏

点亮按键

输出按键显示值、ASCII值等

技术点

html—动态生成表格
css—选择器
js—定时器及onkeydown和onkeyup事件
数组及数组指针

代码

1.html代码

<html>
<head>
    <title>模拟键盘</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="../css/key.css"/>
</head>

<body onkeydown="getKey(event);" onkeyup="getKey2(event);">

    <table id="tableid1" border="1" cellspacing="0" cellpadding="5">
        <tr id="showkeyvalueid" align="center"></tr>
        <tr id="showasciitrid" align="center"></tr>
        <tr id="showchartrid" align="center"></tr>
        <tr id="showdchartrid" align="center"></tr>
    </table>

</body>

<script src="../js/DefineArray.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/DynamicCreateTable.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/MarqueeAndSplash.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/LightKeys.js" type="text/javascript" charset="utf-8"></script>

2.css代码

/*设置普通按键的样式*/
    .divclass{
        width: 80;
        height: 50;
        background-color: black;
        color: white;
        text-align: center;
        padding-top: 30;
    }

/*设置占两列的按键的样式*

最低0.47元/天解锁文章

SunshineXu123

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb模拟键盘

模拟键盘功能1. 实现跑马灯效果2.实现闪屏效果3.按下按键，点亮对应按键；松开按键，熄灭对应按键4.按下按键，输出其对应显示值、ASCII值、字符值及大写字符值显示效果跑马灯闪屏点亮按键输出按键显示值、ASCII值等技术点html—动态生成表格css—选择器js—定时器及onkeydown和onkeyup事件数组及数组指针代
复制链接

扫一扫