js模拟键盘或遥控器操作(加强版)

最新推荐文章于 2022-11-21 23:18:12 发布
最新推荐文章于 2022-11-21 23:18:12 发布
阅读量4.6k 收藏 7
点赞数 1
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caidimin/article/details/50548759
版权 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>OTT-WEB-HD-CATEGORY</title>
<style >
	body{background:url(images/category_bg.png) no-repeat;width:1280px;float:left;}
	.category-main-left{width:263px;margin-left:-10px;float:left;}
	.category-main-left-header{width:298px;margin-left:65px;}
	.category-main-left-header-span{font-size:44px;color:rgb(169, 152, 189);font-weight:800;}
	.category-main-left-div .category-main-left-div-sub{padding-top:15px;padding-bottom:15px;width:168px;margin-left:65px;}
	.category-main-left-div .category-main-left-div-span{font-size:24px;color:rgb(127, 114, 142);font-weight:600;color:rgb(165, 141, 141);}
	.category-active .category-main-left-div-span{color:white;}
	.category-active{background-color:rgb(253, 149, 91);}
	.category-selected .category-main-left-div-span{color:rgb(255, 188, 70);}
	
	.content-img-size{width:160px;height:240px;}
	.category-main-right-header{width:1018px;text-align:center;padding-top:30px;}
	.category-main-right-header-span{float:right;color:rgb(165, 141, 141);font-size:25px;padding-right:55px;margin-top:-15px;}
	.content-team{float:left;}
	.category-main-right-content{width:1018px;padding-top:2px;}
	.category-main-right-content-div-first{margin:0px 20px 20px 20px;float:left;}
	.category-main-right-content-div-img{padding:5px 5px 2px 5px;margin:12px;position: relative;}
	.content-active .category-main-right-content-div-img{background-color:rgb(253, 149, 91);}
	.category-main-right-content-div-img-free{position:absolute;top:30px; }
	.content-team .content-team-title{font-size:20px;color:rgb(171, 159, 175);}
	.content-active .content-team-title{color:rgb(255,255,255);}
	.category-main-right-content-div-span{text-align:center;}
	.category-main-right-footer{width:1018px;text-align:center;padding-top:50px;margin-left:-7px;}
</style>

</head>
<body  >
<div  class="categroy-main" >
	<div class="category-main-left"   >
		<div style="margin-top:30px;"  >
			<div class="category-main-left-header"  >
				<span  class="category-main-left-header-span"   >纪实</span>
			</div>
			<div style="margin-top:20px;">
			</div>
			<div class="category-main-left-div category-active category-selected"  id="category-menu-1" >
					<div class="category-main-left-div-sub" >
						<span class="category-main-left-div-span"   >新片推荐</span>
					</div>
			</div>
			<div class="category-main-left-div"  id="category-menu-2" >
					<div class="category-main-left-div-sub" >
						<span class="category-main-left-div-span"  >全部推荐</span>
					</div>
			</div>
			<div class="category-main-left-div" id="category-menu-3" >
					<div class="category-main-left-div-sub" >
						<span  class="category-main-left-div-span"  >自然探秘</span>
					</div>
			</div>
			<div class="category-main-left-div" id="category-menu-4" >
					<div class="category-main-left-div-sub" >
						<span  class="category-main-left-div-span"  >历史人文</span>
					</div>
			</div>
			<div class="category-main-left-div"  id="category-menu-5" >
					<div class="category-main-left-div-sub" >
						<span  class="category-main-left-div-span" >铁血军事</span>
					</div>
			</div>
			<div class="category-main-left-div"  id="category-menu-6" >
					<div class="category-main-left-div-sub" >
						<span  class="category-main-left-div-span"  >科技前沿</span>
					</div>
			</div>
			<div class="category-main-left-div"  id="category-menu-7" >
					<div class="category-main-left-div-sub" >
						<span  class="category-main-left-div-span"  >政治时事</span>
					</div>
			</div>
		</div>
	</div>
	<div class="category-main-right"  style="float:left;"  >
		<div  class="category-main-right-header"  >		
				<img src="images/icon_up_nor.png"  id="upPage" style="margin-left:90px;"  />
				<span  class="category-main-right-header-span" style="" >1/45</span>
		</div>
		<div  class="category-main-right-content"  >	
			<div class="category-main-right-content-div-first"  >	
				<div class="content-team"  id="content-1" >
					<div  class="category-main-right-content-div-img" >
						<img src="images/img_size_b.png"  class="content-img-size"  /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title" >TFBOY MV</span>
					</div>
				</div>
				<div class="content-team" id="content-2" >
					<div class="category-main-right-content-div-img">
						<img src="images/img_size_a.png" class="content-img-size"  /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free" />
					</div>
					<div  class="category-main-right-content-div-span"  >
						<span class="content-team-title" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team"  id="content-3" >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"  />
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"   />						
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team"  id="content-4" >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"  /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team" id="content-5" >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"  /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team" id="content-6" >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"  /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team" id="content-7" >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"  /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team" id="content-8" >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"   /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team" id="content-9" >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"   /> 
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title content-team-title-current" >头脑特工队</span>
					</div>
				</div>
				<div class="content-team"  id="content-10"  >
					<div class="category-main-right-content-div-img" >
						<img src="images/img_size_a.png"  class="content-img-size"  />
						<img src="images/pic_free.png" class="category-main-right-content-div-img-free"  />						
					</div>
					<div class="category-main-right-content-div-span"  >
						<span class="content-team-title"  >头脑特工队</span>
					</div>
				</div>
			</div>	
		</div>
		<div  class="category-main-right-footer"  >		
				<img src="images/icon_down_nor.png" id="downPage"    />
		</div>
	
	<div>
	
</div>	 

</body>
<script type="text/javascript">
var contentCurrentId=1;
var categoryCurrentId=1;	// 当前记录
var categorySelectedId=1;  // 历史选中记录
var totalCount=7;			//栏目数
var totalContentCount=10;	//内容数
var currentType="menu";  //当前焦点在menu菜单上 还是在content内容上
if(totalContentCount<=5){
	document.getElementById("downPage").style.display="none";
}
function jumpPage() { 
    if (event.keyCode==37 || event.keyCode=="KEY_LEFT")//左 
		fun_left(); 
	if (event.keyCode==38 || event.keyCode=="KEY_UP")//上 
		fun_up();
	if (event.keyCode==39 || event.keyCode=="KEY_RIGHT" )//右 
		fun_right(); 
	if (event.keyCode==40 || event.keyCode=="KEY_DOWN" )//下 
		fun_down();
	if (event.keyCode==13 || event.keyCode=="KEY_ENTER")//enter 
		fun_enter(); 
}


function fun_left(){
	if( currentType=="content" && contentCurrentId!=1 ){
		removeClass("content-active","content-"+contentCurrentId);
		contentCurrentId=contentCurrentId-1;
		document.getElementById("content-"+contentCurrentId).className+=" content-active";
		if(contentCurrentId<=5){
			document.getElementById("upPage").src="images/icon_up_selected.png";
			document.getElementById("downPage").src="images/icon_down_nor.png";
		}
	}else if(currentType=="content" && contentCurrentId==1 ){
		currentType="menu";
		removeClass("content-active","content-"+contentCurrentId);
		document.getElementById("upPage").src="images/icon_up_nor.png";
		removeClass("category-selected","category-menu-"+categorySelectedId);
		categorySelectedId=categoryCurrentId;
		document.getElementById("category-menu-"+categorySelectedId).className+=" category-selected";
	}
}
function fun_right(){
	if( currentType=="content" && contentCurrentId<totalContentCount ){
		removeClass("content-active","content-"+contentCurrentId);
		contentCurrentId=contentCurrentId+1;
		document.getElementById("content-"+contentCurrentId).className+=" content-active";
		if(contentCurrentId>5){
			document.getElementById("upPage").src="images/icon_up_nor.png";
			document.getElementById("downPage").src="images/icon_down_selected.png";
		}
	}else if(currentType=="menu" ){
		currentType="content";
		removeClass("content-active","content-"+contentCurrentId);
		document.getElementById("content-"+contentCurrentId).className+=" content-active";
		document.getElementById("upPage").src="images/icon_up_selected.png";
	}
}
function fun_up(){
	if( currentType=="content" && contentCurrentId>5){
		removeClass("content-active","content-"+contentCurrentId);
		contentCurrentId=contentCurrentId-5;
		document.getElementById("content-"+contentCurrentId).className+=" content-active";
		if(contentCurrentId<=5){
			document.getElementById("upPage").src="images/icon_up_selected.png";
			document.getElementById("downPage").src="images/icon_down_nor.png";
		}
	}else if( currentType=="content" && contentCurrentId<=5){
		alert("Page up");
	}else if(currentType=="menu" && categoryCurrentId!=1 ){
		removeClass("category-active","category-menu-"+categoryCurrentId);
		categoryCurrentId=categoryCurrentId-1;
		document.getElementById("category-menu-"+categoryCurrentId).className+=" category-active";
	}	
}
function fun_down(){
	if( currentType=="content" && contentCurrentId<=5 ){
		removeClass("content-active","content-"+contentCurrentId);
		contentCurrentId=contentCurrentId+5;
		if(contentCurrentId>totalContentCount){
			contentCurrentId=contentCurrentId-5;
			document.getElementById("content-"+contentCurrentId).className+=" content-active";
		}else{
			document.getElementById("content-"+contentCurrentId).className+=" content-active";
			if(contentCurrentId>5){
				document.getElementById("upPage").src="images/icon_up_nor.png";
				document.getElementById("downPage").src="images/icon_down_selected.png";
			}
		}
		
	}else if( currentType=="content" && contentCurrentId>5){
		alert("Page down");
	}else if(currentType=="menu" && categoryCurrentId!=totalCount ){
		removeClass("category-active","category-menu-"+categoryCurrentId);
		categoryCurrentId=categoryCurrentId+1;
		document.getElementById("category-menu-"+categoryCurrentId).className+=" category-active";
	}	
}

function fun_enter(){
	if(currentType=="menu"){
		alert("type:"+currentType+"=>Id:"+categoryCurrentId);
	}else{
		alert("type:"+currentType+"=>Id:"+contentCurrentId)
	}
	
}


document.οnkeydοwn=jumpPage;
function removeClass(removeClassName,selectedId){
	var classNames = document.getElementById(selectedId).className;
	classNames=classNames.replace(/(^\s*)|(\s*$)/g, "");
	var classNameArr = classNames.split(" ");
	var okClassNames = "";
	for (var ii = 0; ii < classNameArr.length; ii++) { 
		if(!(classNameArr[ii]==removeClassName)){
			okClassNames+=" "+classNameArr[ii];
		}
	}
	document.getElementById(selectedId).className=okClassNames;
}
</script>
</html>

伄跳墻
关注
专栏目录
【花雕学编程】Arduino之168种传感器与执行器系列实验清单大全（不断更新中）
雕爷学编程
05-03 2300
实验一百八十四： Goouuu-ESP-32F果云开发板，支持WiFi/蓝牙，板载1.44寸TFT可选配096寸OLED，2路触摸按键，支持TF卡读写，自带1W扬声器，可以播放PCM音乐。实验二百零九：P6全彩LED模组 16X32显示屏单元板 P6-RGB-16X32-8S室内全彩8扫电子屏（HX-P6-16X32-A）实验二百二十：P6全彩LED模组 16X32显示屏单元板 P6-RGB-16X32-8S室内全彩8扫电子屏（HX-P6-16X32-A）
（2020年最新版）App Store 审核指南
cxiao_11的博客
03-24 1575
App Store 审核指南 简介 App 正在改变世界，丰富人们的生活，并为像您一样的开发者提供前所未有的创新机会。因此，App Store 已成长为一个激动人心且充满活力的生态系统，正为数百万的开发者和超过十亿的用户提供服务。不管是开发新手，还是由经验丰富的程序员所组成的大型团队，我们都非常欢迎您为 App Store 开发 app，并希望能够帮助您了解我们的准则，以确保您的 app 能
js实现虚拟键盘
01-20
javascript实现虚拟键盘，可以进行样式调整，可以用在触摸屏上的小工具
JS虚拟键盘
weixin_34404393的博客
02-28 245
由于是触摸屏，所以需要一款JS虚拟键盘。上网找了一个好用的VirtualKeyboard，作了修改。 修改该插件参考的博客文章：http://www.cnblogs.com/xinggong/archive/2013/02/07/2908534.html 下载链接：JS虚拟键盘VirtualKeyboard3.7.1修改版 如何使用： 1、引用JS： &l...
js调用系统虚拟键盘
weixin_30363509的博客
02-02 1561
<input type="text" id="tt" /> <script language="javascript" type="text/javascript"> document.getElementById('tt').onfocus = function(){ var shell = new ActiveX...
js实现简单虚拟键盘
weixin_44957026的博客
10-20 909
js实现简单虚拟键盘 1：效果图 2：项目结构 3：代码 1）：jquery.js文件下载地址：https://jquery.com/download/ 2）：index.html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...
JavaScript 虚拟键盘:Mindfusion JavaScript Keyboard
最新发布
控件与插件之大全
11-21 1215
高度交互，高度可定制--JavaScript 虚拟键盘--Mindfusion JavaScript Keyboard 现在，您的 JavaScript 应用程序可以像本地移动应用程序一样处理屏幕输入。
数字电视知识-- 机顶盒原理技术及应用
02-17 987
<br />机顶盒，又称顶置盒，英文名称为 STB （ Set-top Box ）。是放在电视机顶上的小盒子，并因此而得名。数字电视机顶盒是可以将数字电视信号转换成模拟信号的变换设备，它对经过数字化压缩的图像和声音信号进行解码还原，产生模拟的视频和声音信号，通过电视显示器和音响设备给观众提供高质量的电视节目。<br /><br />一、机顶盒结构<br /> 根据接收数字电视广播和互联网信息的要求，一个机顶盒的硬件结构由信号处理（信道解码和信源解码）、控制和接口几大部分组成。机顶盒的结构图如图一所示机
基于SSH的婴幼儿产品销售系统的开发与设计毕业设计论文
huaying0的博客
04-02 2108
源码下载 http://www.byamd.xyz/hui-zong-1/ 摘要 科学技术日新月异的进步，让人类生活发生了巨大的变化，计算机技术的飞速发展，使各行各业在计算机技术应用方面得到了广泛的普及和使用。信息化时代的到来成为不可抗拒的潮流，人类文明正在进入一个崭新的时代。因此，网上购物也以方便、快捷、费用低的优点正慢慢地进入人们的生活，本系统的题目基于ssh的婴幼儿产品销售系统的设计与实现，通过这个平台，消费者足不出户就可以了解很多的商品信息，给消费者带来了极大的方便。 本系统采用了Browse
iOS 强大第三方资源库
热门推荐
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
HTML5/JavaScript/css绘制空调遥控器，并实现后台数据传输
03-03
通过使用HTML建立框架，JavaScript建立逻辑连接，css进行美化操作，实现一个空调遥控器的界面。 包含：空调开关，温度调节，模式调节，风速调节
puck-remote:使用Puck.js按钮作为遥控器的简单示例
05-09
圆盘遥控器 一个使用Puck.js按钮作为遥控器的简单示例。 它滥用冰球的电池电量广告来指示按钮是否已被按下。 空闲时，其电池电量设置为0。单击该按钮一次，红色LED亮3秒钟，电池电量设置为10。双击将绿色LED电量设置为20。A三次单击可设置蓝色LED和30号电池电量。 该存储库包含一个node.js应用程序，该应用程序侦听广告值的更改并将其打印出来。 puck/puck.js是要上传到您的puck设备的草图 index.js是一个node.js应用程序，可监听设备广告并打印出更改后的值。 设置您的冰球 打开 连接到您的冰球设备 从puck/puck.js上传草图 断开 设置并运行本地应用 在此存储库的根目录中运行npm install 运行node index.js
遥控器模拟鼠标键盘
10-13
利用串口串口通信，实现遥控器模拟鼠标键盘
JS调用本地软键盘.zip
11-14
实现JavaScript调用本地的软键盘（本地Windows系统的虚拟键盘、辅助键盘），里面含代码和说明文档
html桌面插件,js桌面虚拟键盘插件A-Keyboard
weixin_39866741的博客
05-31 654
A-Keyboard是一款js虚拟键盘插件。该插件可以在桌面端模拟普通键盘，移动端键盘和数字键盘。并且内置了几种可选用的主题效果。使用方法内置主题的CSS文件。初始化插件通过模块化的方式来使用插件。const keyboard = require('./keyboard'),numberKeyboard = require('./keyboard.number'),mobileKeyboard =...
js交互式虚拟键盘网页代码
ICode联盟
02-18 175
下载地址 JavaScript互动虚拟键盘,凸显了打字时按下键。 dd:
【h5+javaweb】基于MVC实现登录注册+纯前端js实现空调遥控器前端Demo
qq_38304672的博客
02-26 1171
1.先补一个内嵌式的CSS 实现应用程序全屏，row123为了防bootsrap的行，会与身体冲突出现白边 <style> html，body { width：100％; 身高：100％ 保证金：0px; 填充：0px; } body { font-family：“华文细黑”; 背景：url（imgs / 2.jpg）无重复中心; ...
html 模拟遥控器,Js模拟实现网页遥控器
weixin_33615688的博客
06-10 1751
网页遥控器我想要个遥控器的功能，例如按完3，三秒后自动发送一个3到右边的层。按完48后，3秒种在在右边就显示个48。如果按确定，直接在右边显示。window.onload = function(){var func;var t = 3;var $val = document.getElementById("val");var $show = document.getElementById("sho...
【Auto.js】给手机编一个模拟遥控器
m0_72041756的博客
06-17 2391
本来想给自家的智能电视做个 APP，但家里人要看电视，我又没有电脑，全靠 AIDE 在手机上敲代码，运行测试也是。看来踏入 TV 开发的第一步都有困难。而电视与手机的最大区别在于电视用遥控器操作，不能触屏，而手机可以触屏。于是我想到了 Auto.js，可以用它写一个遥控器浮窗脚本，在手机上模拟遥控器操作，如此模拟电视环境运行 APP。由于安卓虚拟机的 Android TV 和 Google 官方的电视棒的遥控器与国内的有极大不同，没有 0-9 数字键，只有开关、方向键、OK 键，所以我只要做一个方向键盘就行
禹鼎F24工业遥控器操作与保固说明
本手册详细阐述了F24系列遥控器的操作方法、维护指南以及保修政策。" 禹鼎F24工业遥控器是一款在电力电子技术领域广泛应用的设备，主要功能是实现对重型机械设备如起重机的远程控制。其设计坚固耐用，适应各种工业...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值