使用JQ,写的一个小小的虚拟键盘。

  1 <!DOCTYPE HTML>

  2 <html>

  3 <head>

  4 <meta http-equiv="Content-Type" content="textml; charset=utf-8">

  5 <title>虚拟键盘</title>

  6 <script type="text/javascript" src="jquery-1.8.2.js"></script>

  7 <style>

  8 *{

  9     margin:0;

 10     padding:0;

 11 }

 12 li {

 13     list-style-type: none;

 14 }

 15 #search {

 16     position: absolute;

 17     top: 0px;

 18     left: 0px;

 19 }

 20 .keyboard {

 21     width: 190px;

 22     border: 1px #e5e5e5 solid;

 23     

 24 }

 25 .uls {

 26     margin-left: 3px;

 27 }

 28 .keyboard_two {

 29     margin-top: 1px;

 30 }

 31 .keyboard_thr {

 32     margin-top: 1px;

 33 }

 34 .keyboard li{

 35     float: left;

 36     width: 44px;

 37     height: 44px;

 38     border: 1px #c2c2c2 solid;

 39     line-height: 44px;

 40     text-align: center;

 41     font-size: 17px;

 42     background: -webkit-linear-gradient(#fff 0%,#d8d8d8 100%);

 43     cursor: pointer;

 44 }

 45 .keyboard .search {

 46     width: 44px;

 47     height: 62px;

 48     padding-top: 25px;

 49     line-height: 20px;

 50 }

 51 .keyboard .zero {

 52     width: 135px;

 53     height: 40px;

 54     position: absolute;

 55     left: 4px;

 56     top: 211px;

 57 }

 58 #search {

 59     position: absolute;bottom: 0px;right: 77px;

 60     height: 32px;

 61     width: 190px;

 62 }

 63 

 64 #search input {

 65     padding-left: 30px;

 66     background: none;

 67     border: none;

 68     height: 32px;

 69     width: 160px;

 70     font-family: Helvetica, Arial, sans-serif;

 71     font-weight: bold;

 72     font-size: 1.1em;

 73     color: #999;

 74 

 75 }

 76 #submit{

 77     position: absolute;bottom: 4px;right: 0px;

 78     height: 33px;

 79     width: 70px;

 80     border: 1px red solid;

 81     position: absolute;

 82     top: 0px;

 83     left: 300px;

 84 }

 85 

 86 #submits {

 87     background: none;

 88     border: none;

 89     height: 34px;

 90     width: 55px;

 91     cursor: pointer;

 92 }

 93 </style>

 94 </head>

 95 <body>

 96 <form id="head">

 97     <div id="search">

 98         <input type="text" placeholder='用户名/手机号' name='number'>

 99         <span class="close"></span>

100         <div class="keyboard">

101             <ul class='keyboard_one uls'>

102                 <li class="num">7</li>

103                 <li class="num">8</li>

104                 <li class="num">9</li>

105                 <li class='cut'>-</li>

106                 <div class="clear">&nbsp;</div>

107             </ul>

108             <ul class='keyboard_two uls'>

109                 <li class="num">4</li>

110                 <li class="num">5</li>

111                 <li class="num">6</li>

112                 <li class='plus'>+</li>

113                 <div class="clear">&nbsp;</div>

114             </ul>

115             <ul class='keyboard_thr uls'>

116                 <li class="num">1</li>

117                 <li class="num">2</li>

118                 <li class="num">3</li>

119                 <li class='search'></br></li>

120                 <li class="zero num">0</li>

121             </ul>

122         </div>

123         <div class="clear">&nbsp;</div>

124     </div>

125     <div id="submit">

126         <input id="submits" type="submit" value="dianwo">

127     </div>

128 </form>

129 </body>

130 <script>

131 $(function(){

132     $('.num').on('click',function(){

133         var Num = $('#search input').val();

134         $('#search input').val(Num+$(this).html());

135     });

136     $('.plus').on('click',function(){

137         $('#search input').val(Number($('#search input').val())+1);

138     });

139     $('.cut').on('click',function(){

140         $('#search input').val(Number($('#search input').val())-1);

141     });

142 });

143 

144 

145 

146 </script>

147 </html>
View Code

你可能感兴趣的:(使用)