一个漂亮的小键盘代码

- 日理万妓 2022-05-16 09:22 126阅读 0赞

做web项目，有时需要用到小键盘，使用js实现。逻辑当然很简单，就是输入。只是样式很难整的漂亮。

今天在网上找到一个样式，还挺漂亮，在这里记一下，方便以后使用。js的逻辑代码我自己全部重写了。

样式中只用到一张图片，还是很不错的。

我已经上传了，地址：

[http://download.csdn.net/detail/lushuaiyin/4765932][http_download.csdn.net_detail_lushuaiyin_4765932]

效果图：

![1352876938_4895.png][]

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 οnclick="changeValue('1')"  οndblclick="dbchangeValue('1')"    οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">1</li>
    
    			<li οnclick="changeValue('2')"   οndblclick="dbchangeValue('2')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">2</li>
    
    			<li οnclick="changeValue('3')"   οndblclick="dbchangeValue('3')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">3</li>
    
    			<li οnclick="goCallTwo()"   οndblclick="goCallTwo()" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">确定</li>
    
    			<li οnclick="changeValue('4')"   οndblclick="dbchangeValue('4')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">4</li>
    
    			<li οnclick="changeValue('5')"   οndblclick="dbchangeValue('5')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">5</li>
    
    			<li οnclick="changeValue('6')"   οndblclick="dbchangeValue('6')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">6</li>
    
    			<li οnclick="goBack()"   οndblclick="goBackdb()" 
    			οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">退格</li>
    
    			<li οnclick="changeValue('7')"   οndblclick="dbchangeValue('7')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">7</li>
    
    			<li οnclick="changeValue('8')"   οndblclick="dbchangeValue('8')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">8</li>
    
    			<li οnclick="changeValue('9')"   οndblclick="dbchangeValue('9')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">9</li>
    
    			<li οnclick="goClear()"   οndblclick="goClear()" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">清除</li>
    
    			<li οnclick="changeValue('*')"   οndblclick="dbchangeValue('*')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">*</li>
    
    			<li οnclick="changeValue('0')"   οndblclick="dbchangeValue('0')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">0</li>
    
    			<li οnclick="changeValue('#')"   οndblclick="dbchangeValue('#')" οnmοuseοver="javascript:this.className='active';" οnmοuseοut="javascript:this.className='';">#</li>
    
    			<li οnclick="quxiao()"   οndblclick="quxiao()" 
    			οnmοuseοver="javascript:this.className='active';" οnmοuseοut="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

![1352876773_7160.png][]

[http_download.csdn.net_detail_lushuaiyin_4765932]: http://download.csdn.net/detail/lushuaiyin/4765932
[1352876938_4895.png]: https://img-my.csdn.net/uploads/201211/14/1352876938_4895.png
[1352876773_7160.png]: https://img-my.csdn.net/uploads/201211/14/1352876773_7160.png