做web项目,有时需要用到小键盘,使用js实现。逻辑当然很简单,就是输入。只是样式很难整的漂亮。
今天在网上找到一个样式,还挺漂亮,在这里记一下,方便以后使用。js的逻辑代码我自己全部重写了。
样式中只用到一张图片,还是很不错的。
我已经上传了,地址:
http://download.csdn.net/detail/lushuaiyin/4765932
效果图:
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="calculator.css" />
<script src="jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
<div id="counter" align="center" valign="top">
<div id="counter_content" valign="top">
<h3><input id="inputCallTwo" type="text" readonly value="" /></h3>
<ul>
<li onclick="changeValue('1')" ondblclick="dbchangeValue('1')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">1</li>
<li onclick="changeValue('2')" ondblclick="dbchangeValue('2')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">2</li>
<li onclick="changeValue('3')" ondblclick="dbchangeValue('3')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">3</li>
<li onclick="goCallTwo()" ondblclick="goCallTwo()" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">确定</li>
<li onclick="changeValue('4')" ondblclick="dbchangeValue('4')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">4</li>
<li onclick="changeValue('5')" ondblclick="dbchangeValue('5')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">5</li>
<li onclick="changeValue('6')" ondblclick="dbchangeValue('6')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">6</li>
<li onclick="goBack()" ondblclick="goBackdb()"
onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">退格</li>
<li onclick="changeValue('7')" ondblclick="dbchangeValue('7')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">7</li>
<li onclick="changeValue('8')" ondblclick="dbchangeValue('8')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">8</li>
<li onclick="changeValue('9')" ondblclick="dbchangeValue('9')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">9</li>
<li onclick="goClear()" ondblclick="goClear()" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">清除</li>
<li onclick="changeValue('*')" ondblclick="dbchangeValue('*')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">*</li>
<li onclick="changeValue('0')" ondblclick="dbchangeValue('0')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">0</li>
<li onclick="changeValue('#')" ondblclick="dbchangeValue('#')" onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">#</li>
<li onclick="quxiao()" ondblclick="quxiao()"
onmouseover="javascript:this.className='active';" onmouseout="javascript:this.className='';">取消</li>
</ul>
</div>
<div id="bg" ></div>
</div>
</body>
</html>
<script>
function lionmouseover(event){
this.className='active';
}
function lionmouseout(event){
this.className='';
}
function changeValue(num){
var callTwo=$("#inputCallTwo").val();
if(num!=null){
var vv=$.trim(callTwo)+$.trim(num);
$("#inputCallTwo").val(vv);
}
}
//双击可以根据自己的逻辑改写,这里我写的和单击的一样
function dbchangeValue(num){
var callTwo=$("#inputCallTwo").val();
if(num!=null){
var vv=$.trim(callTwo)+$.trim(num);
$("#inputCallTwo").val(vv);
}
}
function goBack(){
var callTwo=$("#inputCallTwo").val();
if(callTwo==null||$.trim(callTwo)==""){
$("#inputCallTwo").val("");
}else{
var len=0;
if(callTwo.length-1<=0){
len=0;
}else{
len=callTwo.length-1;
}
var sub=callTwo.substring(0,callTwo.length-1);
$("#inputCallTwo").val($.trim(sub));
}
}
//双击可以根据自己的逻辑改写,这里我写的和单击的一样
function goBackdb(){
var callTwo=$("#inputCallTwo").val();
if(callTwo==null||$.trim(callTwo)==""){
$("#inputCallTwo").val("");
}else{
var len=0;
if(callTwo.length-1<=0){
len=0;
}else{
len=callTwo.length-1;
}
var sub=callTwo.substring(0,callTwo.length-1);
$("#inputCallTwo").val($.trim(sub));
}
}
function goClear(){
$("#inputCallTwo").val("");
}
function goCallTwo(){
alert($("#inputCallTwo").val());
goClear();
}
function quxiao(){
window.close();
}
</script>
calculator.css
* { padding: 0; margin: 0; }
li { list-style: none; }
#counter { width: 500px; height: 420px; margin: 5px auto 0; position: relative; }
#counter h2 { line-height: 42px; padding-left: 5px; font-size: 14px; font-family: arial; color: #ff3333; }
#counter a { font-weight: normal; text-decoration: none; color: #ff3333; }
#counter a:hover { text-decoration: underline; }
#bg { width: 280px; height: 200px; border: 3px solid #680023; background: #ADADAD; filter: alpha(opacity=80); opacity: 0.8; position: absolute; left: 50%; top: 15px; margin-left: -231px; }
#counter_content { width: 250px; position: absolute; top: 30px; left: 40px; z-index: 1; }
#counter_content h3 { margin-bottom: 10px; }
#counter_content h3 input { border: none; width: 223px; height: 30px; line-height: 30px; padding: 0 10px; background: url(images/ico.png) no-repeat; text-align: right; color: #333; font-size: 14px; font-weight: bold; }
#counter_content ul { width: 250px; }
#counter_content li { width: 60px; height: 30px; line-height: 30px; float: left; background: url(images/ico.png) no-repeat -303px 0; text-align: center; color: #fff; cursor: pointer; margin: 0 1px 4px 0; }
#counter_content .active { background: url(images/ico.png) no-repeat -243px 0; }
#counter p { width: 500px; position: absolute; bottom: 20px; left: 0; color: #ff3333; text-align: center; font-size: 12px; }
images/ico.png
分享到:
相关推荐
用C#写的 漂亮软键盘(小键盘)源代码
虚拟键盘 c# 源代码
网狐6603登录框效果 MFC一个漂亮的登录框带小键盘密码输入
漂亮软键盘 源代码
是一款非常不错的软键盘(小键盘),适合开发人员参考。
漂亮C#软键盘(小键盘)源代码源码.zip
该资源是一款非常漂亮且精致的虚拟键盘实例,资源非常的好,代码书写非常的规范,希望能帮助到大家,学习和借鉴
键盘锁屏使用类似iPhone锁屏风格的密码,帮助您成为第一个体验最新ios锁屏的人。 特征 滑动来解锁。 输入 PIN 码进行解锁。 许多漂亮的壁纸可供选择 选择解锁动画 键盘锁定屏幕还允许使用图库中的壁纸 解锁声音启用/...
jQuery软键盘插件是一款清新漂亮的jQuery虚拟键盘特效代码。
jQuery软键盘插件是一款清新漂亮的jQuery虚拟键盘特效代码。
画按钮图片,设置编辑框只读状态,构造乐谱列表,取常量中的每分钟拍数,取常量中的乐谱,置MIDI组件,演奏音符,停止演奏音符,处理按下某键,处理放开某键,构造音符对照表,添加键代码音符对,添加字符音符对,查询键代码对应...
摘要:Delphi源码,图形处理,软键盘,屏幕键盘 Delphi屏幕键盘,用图片贴图实现的,很漂亮的软键盘效果,编译后可看到软...右侧是一个密码输入框,在支付程序中,软键盘的作用还是挺大的。 运行环境:Windows/Delphi7
一款漂亮的js图片切换功能,拿去用一下,你一定会喜欢的
一个漂亮的T9拨号面板,拿来就可以用,简单易学。
一个非常简单易用的jQuery插件,在高版本浏览器下 当你鼠标定位在输入框中的时候,它就会弹出来在网页右下角 非常漂亮的苹果风格 当然,它并不支持手机版 适合pc版需要的软键盘 使用方法: 1、将CSS中的样式...
snake2.c 另一个贪吃蛇 snake3.zip 第三个贪吃蛇,界面一般,但算法不错。 learnc.c 一个有趣的图形演示 pingpong.c 乒乓球 jzq.c 井字棋,我不会玩,你呢? radar.c 一本书上附带的,很眩的动画哦。 russia1.c ...
一款漂亮的节日抽奖网页特效,jQuery抽奖转盘代码,可键盘控制旋转,背景动画为红包雨落下,还可以调整速度。
Sublime Text 中文版是一个代码编辑器(Sublime Text 是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富...
我的这款游戏就做到了一个类一个窗体三个方法 OK!解决了,非常容易看懂。 〓界面简洁美观〓:呵呵,这窗体是不是非常漂亮啊? 去除冗余部分:我看很多教程里面都有很多没什么用的东西比如说自定义按键设置,...