模拟键盘效果页面

最新推荐文章于 2023-03-17 17:49:15 发布
最新推荐文章于 2023-03-17 17:49:15 发布
阅读量450 收藏
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/50286071
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟键盘</title>
    <style type="text/css">
    html{font-family: 'Microsoft YaHei';}
    #main{width: 1200px; height: 430px;border: 1px solid #ccc; padding-left: 10px; padding-top: 10px; margin: 40px auto 0;}
    #main>div{height: auto; overflow: hidden;}
    span[keyCode]{ display: block; height: 60px; line-height: 60px; text-align: center; border: 1px solid #ccc;  margin-bottom: 10px; float:left; margin-right: 10px;}
    span[keyCode]{box-shadow: 1px 1px 4px 0px #cfcfcf; position: relative; overflow: visible;}
    .active{box-shadow: 0 0 0 #fff!important; color: #fff;}
    .ball{position: absolute; min-width: 30px; height: 30px; text-align: center; line-height: 30px; color: #fff; border-radius: 15px; background-color: #F53434;}
    .w60{width: 60px;}
    .w80{width: 80px;}
    .w100{width: 100px;}
    .w120{width: 120px;}
    .w140{width: 140px;}
    .w150{width: 150px;}
    .w405{width: 405px;}
    </style>
</head>
<body>
    <div id="main">
        <div class="">
            <span class="w60" keyCode="27">Esc</span>
            <span class="w60" keyCode="112">F1</span>
            <span class="w60" keyCode="113">F2</span>
            <span class="w60" keyCode="114">F3</span>
            <span class="w60" keyCode="115">F4</span>
            <span class="w60" keyCode="116">F5</span>
            <span class="w60" keyCode="117">F6</span>
            <span class="w60" keyCode="118">F7</span>
            <span class="w60" keyCode="119">F8</span>
            <span class="w60" keyCode="120">F9</span>
            <span class="w60" keyCode="121">F10</span>
            <span class="w60" keyCode="122">F11</span>
            <span class="w60" keyCode="123">F12</span>
        </div>

        <div class="">
            <span class="w60" keyCode="192">`</span>
            <span class="w60" keyCode="49">1</span>
            <span class="w60" keyCode="50">2</span>
            <span class="w60" keyCode="51">3</span>
            <span class="w60" keyCode="52">4</span>
            <span class="w60" keyCode="53">5</span>
            <span class="w60" keyCode="54">6</span>
            <span class="w60" keyCode="55">7</span>
            <span class="w60" keyCode="56">8</span>
            <span class="w60" keyCode="57">9</span>
            <span class="w60" keyCode="48">0</span>
            <span class="w60" keyCode="189">-</span>
            <span class="w60" keyCode="187">=</span>
            <span class="w140" keyCode="8">Backspace</span>
        </div>

        <div class="">
            <span class="w100" keyCode="9">Tab</span>
            <span class="w60" keyCode="81">Q</span>
            <span class="w60" keyCode="87">W</span>
            <span class="w60" keyCode="69">E</span>
            <span class="w60" keyCode="82">R</span>
            <span class="w60" keyCode="84">T</span>
            <span class="w60" keyCode="89">Y</span>
            <span class="w60" keyCode="85">U</span>
            <span class="w60" keyCode="73">I</span>
            <span class="w60" keyCode="79">O</span>
            <span class="w60" keyCode="80">P</span>
            <span class="w60" keyCode="219">[</span>
            <span class="w60" keyCode="221">]</span>
            <span class="w100" keyCode="220">\</span>
        </div>

        <div class="">
            <span class="w120" keyCode="20">Caps Lock</span>
            <span class="w60" keyCode="65">A</span>
            <span class="w60" keyCode="83">S</span>
            <span class="w60" keyCode="68">D</span>
            <span class="w60" keyCode="70">F</span>
            <span class="w60" keyCode="71">G</span>
            <span class="w60" keyCode="72">H</span>
            <span class="w60" keyCode="74">J</span>
            <span class="w60" keyCode="75">K</span>
            <span class="w60" keyCode="76">L</span>
            <span class="w60" keyCode="186">;</span>
            <span class="w60" keyCode="222">'</span>
            <span class="w150" keyCode="13">Enter</span>
        </div>
        <div class="">
            <span class="w150" keyCode="16">Shift</span>
            <span class="w60" keyCode="90">Z</span>
            <span class="w60" keyCode="88">X</span>
            <span class="w60" keyCode="67">C</span>
            <span class="w60" keyCode="86">V</span>
            <span class="w60" keyCode="66">B</span>
            <span class="w60" keyCode="78">N</span>
            <span class="w60" keyCode="77">M</span>
            <span class="w60" keyCode="188">,</span>
            <span class="w60" keyCode="190">.</span>
            <span class="w60" keyCode="191">/</span>
            <span class="w120" keyCode="16">Shift</span>
            <span class="w60" keyCode="38">Up</span>
        </div>

        <div class="">
            <span class="w80" keyCode="17">Ctrl</span>
            <span class="w60" keyCode="">Fn</span>
            <span class="w60" keyCode="">Win</span>
            <span class="w60" keyCode="18">Alt</span>
            <span class="w405" keyCode="32"></span>
            <span class="w60" keyCode="18">Alt</span>
            <span class="w60" keyCode="">Copy</span>
            <span class="w60" keyCode="17">Ctrl</span>
            <span class="w60" keyCode="37">Left</span>
            <span class="w60" keyCode="40">Down</span>
            <span class="w60" keyCode="39">Right</span>
        </div>
    </div>
    <script type="text/javascript" src="http://cdn.w3cfuns.com/resource/js/jquery-1.10.2.min.js?v=20140816"></script>
    <script type="text/javascript">
    $(function(){
        var frequency = {};
        $(document).on('keydown',function(e){
            var keyCode = e.keyCode;
            var $this = $('span[keyCode='+ keyCode +']');
            $this.addClass('active');
            if(frequency[keyCode]){
                frequency[keyCode] += 1;
            }else{
                frequency[keyCode] = 1;
            }
            var c = _.color();
            $this.css({'background-color':c,'border-color':c});
            _.bubble($this,frequency[keyCode],c);
            return false;
        })
        $(document).on('keyup',function(e){
            var keyCode = e.keyCode;
            var $this = $('span[keyCode='+ keyCode +']');
            $this.removeClass('active');
            $this.css({'background-color':'#fff','border-color': '#ccc'});
            return false;
        })
        var _color = [
            '#ed5565',
            '#da4453',
            '#fc6e51',
            '#e9573f',
            '#ffce54',
            '#f6bb42',
            '#a0d468',
            '#8cc152',
            '#48cfad',
            '#37bc9b',
            '#4fc1e9',
            '#3bafda',
            '#5d9cec',
            '#4a89dc',
            '#ac92ec',
            '#967adc',
            '#ec87c0',
            '#d77oad',
            '#656d78',
            '#434a54'
        ]
        var _ = {
            bubble : function($target,n,c){
                var w = $target.innerWidth(),
                    h = $target.innerHeight(),
                    l = $target.offset().left,
                    t = $target.offset().top,
                    sl = l + ((w-30)/2),
                    st = t + ((h-30)/2),
                    $this = $('<span class="ball">+'+ n +'</span>').css({'left':sl,'top':st,'background-color':c});
                $this.appendTo('#main');
                $this.stop(true,true).animate({
                    top: st - 60
                },function(){
                    $this.fadeOut(400,function(){$(this).remove()});
                })
            },
            color:function(){
                var l = _color.length;
                var n = Math.floor(Math.random()*l);
                return _color[n];
            }
        }
    })
    </script>
</body>
</html>
诸葛苍穹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node-keyupdown:[实验] 在 nodejs 上模拟 keyup 和 keydown
07-12
节点键updown 在 nodejs 上模拟 keyup 和 keydown。 样本 var keydownup = require ( "./index" ) keydownup ( process . stdin ) process . stdin . on ( 'keydown' , function ( ) { console . log ( "keydown" ) } ) process . stdin . on ( 'keyup' , function ( ) { console . log ( "keyup" ) } ) process . stdin . on ( 'keypress' , function ( ch , key ) { console . log ( "keypress" ) if ( key && key . name == "c"
Nodejs爬虫刷csdn访客+桌面自动化框架Robotjs模拟鼠标，键盘，屏幕事件！
月城先生的博客
03-01 8829
叮铃铃！叮铃铃！老师：“小明 你的梦想是什么？”， 沉思了一下 小明：“额额  我想有车有房，自己当老板，媳妇貌美如花，还有一个当官的兄弟” 老师：“北宋有一个人和你一样···”； 哈喽！大家好！ 请叫我布莱恩·奥复托·杰森张； 爬虫部分！ 一提到爬虫，好多人先想到python 没错就是那个py交易的那个，这货所为是什么都能干 上九天揽月下五洋捉鳖无处不出现它的身影 鄙人对它也是不得不折
在Node环境中模拟键鼠热键
C1054158790的博客
03-17 425
utomatically operate the keyboard and mouse, do not need gyp.const robot = require(‘robot-cmd’)robot.moveTo(100,100) robot.leftClick() robot.leftDown() robot.leftUp() robot.doubleClick() robot.rightClick() robot.rightDown() robot.rightUp() robot.wheelDown(
nodejs
weixin_67339511的博客
06-13 114
运行在服务器的javascript
Node.js使用readline模块实现输入
rraxx的博客
03-21 736
Node.js使用readline模块实现输入 readline是实现标准输入（键盘）输出（显示器）的封装好的模块，使用require(“redaline”)引用该模块 步骤如下： 1.基础输入输出 //1.引入readline模块 const readline = require("readline") //2.创建readline实例 const r1 = readline.createInterface({ input:process.stdin,//标准输入 output:proce
jquery虚拟键盘中文打字效果
11-24
本话题聚焦于“jQuery虚拟键盘中文打字效果”，这是一个为网页应用添加输入模拟功能的实用技术，尤其适用于移动设备或触摸屏应用，使得用户无需物理键盘也能输入文字。 首先，让我们深入了解jQuery虚拟键盘的工作...
jquery实现页面虚拟键盘特效
10-23
本文实例讲述了jquery比较简洁的软键盘特效实现方法。而且带有数字与字母切换功能，效果非常不错，分享给大家供大家参考。
JS模拟键盘打字效果的方法
10-23
在JavaScript中，模拟键盘打字效果通常用于创建交互式的用户界面，例如在线打字练习或者游戏。这个例子中，我们看到一个简单的实现方法，通过为每个字母键绑定一个单独的函数来达到模拟打字的效果。下面我们将详细...
jQuery底部弹出虚拟键盘代码
06-24
4. **遮罩效果**：为了防止用户在虚拟键盘弹出时误操作页面其他元素，通常会添加一个半透明的遮罩层覆盖整个页面。这可以通过创建一个全屏的div元素，设置合适的CSS样式（如背景颜色、透明度和位置）并添加到DOM中来...
模拟手机虚拟键盘
06-01
标题中的"模拟手机虚拟键盘"指的是在手机应用或网页上提供的一种键盘输入方式，它通过在屏幕上动态生成可点击的字母、数字和符号，替代了物理键盘输入，从而增加了数据输入的安全性。 **工作原理** 虚拟键盘的主要...
node-autorobo:模拟鼠标和键盘输入，截屏
06-04
自动机器人 一个模拟鼠标和键盘输入并截取屏幕截图的节点模块。 安装 $ npm install autorobo 查看要求： : 文档 例子 var robo = require ( "autorobo" ) ; // move the mouse to coordinates robo . mouse . move ( 100 , 400 ) ; // click left mouse robo . mouse . click ( robo . mouse . left ) ; // click and hold right mouse for 1 second robo . mouse . click ( robo . mouse . right , 1000 ) ; // press middle mouse, move, and release. robo . mouse
采用纯js脚本实现的键盘输入模拟器脚本源码例子
09-18
VirtualKeyboard.full.3.5.1，是采用纯js脚本实现的键盘输入模拟器脚本源码例子，可以用于web网页的键盘输入，通过鼠标方式响应键盘操作，功能强大。
自动化实现HelloWorld，模拟键盘和鼠标点击
08-19
可以自动新建工程和实现最简单的HelloWorld，模拟鼠标的移动点击，和键盘的敲击，可以利用这个原理编写好多有趣的东西。
electron-vue中调用系统屏幕键盘（linux与windows）
前端小白
06-10 8322
文章目录应用场景实现思路具体代码结尾 应用场景 公司项目需要放在一体机上，没有外接键盘与鼠标，并且要求客户端软件全屏。因此在某些需要输入中文的地方，使用系统自带的屏幕键盘无疑是最好的选择。 实现思路 由于electron-vue是采用的electron2.0.4，因此我们可以在渲染进程中随便调用node.js API.而无需其他的配置。 因为要兼容linux与windows两个平台。因此需要借助node的os模块 因为需要使用子进程打开屏幕键盘，因此需要借助node的child_process模块 通过以上
Node.js+windows
weixin_43885541的博客
08-24 158
Node.js简介 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。 安装Node.js步骤 1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 注意：nodeJs到14.0.0就不支持win7系统了，只能选择
Nodejs使用robotjs轻松控制鼠标键盘
楠辞琦咎 难上加楠 出琦止胜
06-02 1万+
用Nodejs轻松控制鼠标键盘 最近刚完成了基于vue的聊天系统的开发，闲下来之余，鼓捣了一下node脚本，每天上班开机挺麻烦，要一个一个打开软件、手动连wifi；于是乎，鼓捣出了一个很简单的自动执行脚本； 本例首先安装 npm i robotjs 和 npm i opn （opn与控制鼠标键盘无关） 简单的代码如下（npm安装好依赖后，以下代码可直接复制执行）： const opn = require('opn'); //执行语句 var robot = require("robotjs")
js自动模拟用户键盘输入，自动触发输入事件，三种方法，适用vue,react网页
weixin_54051261的博客
07-12 1万+
js自动模拟用户键盘输入，自动触发输入事件，三种方法，适用vue,react网页
js模拟键盘事件方法
热门推荐
weixin_33910434的博客
05-24 1万+
方法定义 export function fireKeyEvent(el, evtType, keyCode) { var evtObj; if (document.createEvent) { if (window.KeyEvent) {//firefox 浏览器下模拟事件 evtObj = document.createEvent('KeyEvents'...
axure如何实现键盘删除效果
最新发布
03-30
Axure可以通过以下步骤实现键盘删除效果： 1. 在Axure中创建一个文本框，用于接收用户输入的文本。 2. 创建一个按钮或者文本框，用于模拟删除键。 3. 在按钮或文本框的交互中，添加一个动作。选择“修改变量”...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值