【原创】仿农行随机屏幕键盘 - 王小白

首先介绍一个算法，那就是生成一个0-9数字的随机数列，网上有很多版本，个人觉得我的算法效率是最高的，很值得借鉴：

function arrayNub(){
 //算法说明：定义一个数组，用Math方法随机的产生一位不超过数组长度的数，
 //并将以该数作为下标数的数组元素以数组的第一位交换
 //这样保证了除了最后一个数组元素的每个数取到的概率都是相等的，
 //本例在数组多定义了一个数，最后去除，以保证前面数被取出的相等概率
 //然后将数组的第一个数取出来，放进新数组，
 //并将原数组的第一个元素去掉形成新的原数组，循环
 var NumArray= new Array(1,2,3,4,5,6,7,8,9,0,11);
 var NewArray=new Array(11);//新建数组
 var NumArrayLen=NumArray.length;
  for (i=0;i<NumArrayLen;i++){
 var NumArrayLen2=NumArray.length;
 var ExNum=Math.floor(Math.random()*(NumArrayLen2-1));//随机位置数
 var Temp=NumArray[ExNum];//交换随机位置和第一项的数据
 NumArray[ExNum]=NumArray[0];
 NumArray[0]=Temp;
 NewArray[i]=NumArray[0];//取出第一项的值并赋值给新数组
 NumArray=NumArray.slice(1,NumArrayLen2);//截取形成新数组
 }
 return NewArray;
}

有了以上的做基础，其他代码实现就很简单了：基本就是一些排版和特效：

代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>仿农行随机键盘效果</title>
  6  <script src="scripts/jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
  7  <script language="javascript" type="text/javascript">
  8  $(function(){
  9   $("#in").focus(function(ev){
 10      var evs= ev || window.event; 
 11      var XYposition=mousePosition(evs);
 12      var X=XYposition.x;
 13      var Y=XYposition.y; 
 14      $('#blk1').css("opacity","0").css("left",''+X+'px').css("top",''+Y+'px');
 15      $('#blk1').animate({width:"114px",height:"146px",opacity:"1"},3000);
 16    })
 17    //按键切换样式
 18    $(".cell").hover(function(){$(this).addClass("tag")},function(){$(this).removeClass("tag")});
 19    //随机分配按键值并记录下来
 20    var NumArr=arrayNub();
 21    //给按键赋值
 22    var $cell=$(".cell:not([cell])");//单独选出对象，避免多次选择，提高执行效率
 23    var CellLen=$cell.length;
 24     // Debug alert(CellLen);
 25    for (i=0;i<10;i++)
 26     {
 27       $cell.eq(i).html(''+NumArr[i]+'');
 28     }
 29    //添加按键行为,记录输入框的值
 30    var Sns=$("#in").val();
 31    $cell.click(function(){
 32      var Sn=$(this).html();
 33      Sns+=Sn;
 34     $("#in").val(Sns);
 35    });
 36    //确定按钮
 37    $("#confirm").click(function(){
 38     if(Sns==""||Sns==null||Sns==undefined){alert("密码取值过程出现错误！请重新输入密码再试");}else{
 39        var TempSn=Sns+Math.floor(Math.random()*100000000000000000000000000000000);
 40        $("#in").val(TempSn);//密码填充，防止破解
 41        $("#blk1").hide();
 42        alert("密码是："+Sns);
 43      };
 44    });
 45   //重填按钮
 46    $("#reset").click(function(){$("#in").val("");Sns="";});
 47   //失去焦点，键盘影藏
 48    $("#in").blur(function(){$("#blk1").hide();});
 49  });
 50  
 51  //鼠标位置
 52 function mousePosition(ev){
 53     if(ev.pageX || ev.pageY){
 54     return {x:ev.pageX, y:ev.pageY};
 55     }
 56     return {
 57     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
 58     y:ev.clientY + document.body.scrollTop - document.body.clientTop
 59     };
 60   } 
 61  //产生0—9随意位置的数组
 62 function arrayNub(){
 63  //算法说明：定义一个数组，用Math方法随机的产生一位不超过数组长度的数，并将以该数作为下标数的数组元素以数组的第一位交换
 64  //这样保证了除了最后一个数组元素的每个数取到的概率都是相等的，本例在数组多定义了一个数，最后去除，以保证前面数被取出的相等概率
 65  //然后将数组的第一个数取出来，放进新数组，并将原数组的第一个元素去掉形成新的原数组，循环
 66  var NumArray= new Array(1,2,3,4,5,6,7,8,9,0,11);
 67  var NewArray=new Array(11);//新建数组
 68  var NumArrayLen=NumArray.length;
 69   for (i=0;i<NumArrayLen;i++){
 70  var NumArrayLen2=NumArray.length;
 71  var ExNum=Math.floor(Math.random()*(NumArrayLen2-1));//随机位置数
 72  var Temp=NumArray[ExNum];//交换随机位置和第一项的数据
 73  NumArray[ExNum]=NumArray[0];
 74  NumArray[0]=Temp;
 75  NewArray[i]=NumArray[0];//取出第一项的值并赋值给新数组
 76  NumArray=NumArray.slice(1,NumArrayLen2);//截取形成新数组
 77  }
 78  return NewArray;
 79 }
 80  
 81  </script>
 82  <style type="text/css">
 83 <!--
 84 #blk1{
 85 height: 146px;
 86 width: 114px;
 87 overflow:hidden;
 88 background-color:#00FF00;
 89 position:absolute;
 90 display:none;
 91 }
 92 .cell{
 93 height:30px;
 94 width:30px;
 95 background-color:#9999FF;
 96 border:#9933FF 1px groove;
 97 float:left;
 98 overflow:hidden;
 99 line-height:30px;
100 text-align:center;
101 margin-left:3px;
102 margin-top:3px;
103 }
104 .main
105 {
106 height:114px;
107 width: 110px;
108 }
109 .tag{
110 background:#99CC99;}
111 -->
112  </style>
113 </head>
114 
115 <body>
116 <div id="emample1" class="example">
117          请输入密码：<input name="input" id="in" size="20" type="password" />
118 
119              <input type="button" id="text" name="Submit" value="按钮" />
120         
121   <div class="description">示例:模拟农行随机数字键盘的系统<br /></div>
122         <div class="clr"></div>
123         <div id="blk1" class="blk" >
124             <div class="main">
125                
126                      <div id="1" class="cell" ></div> 
127                      <div id="2" class="cell" ></div> 
128                      <div id="3" class="cell" ></div> 
129                      <div id="4" class="cell" ></div> 
130                      <div id="5" class="cell" ></div> 
131                      <div id="6" class="cell" ></div> 
132                      <div id="7" class="cell" ></div> 
133                      <div id="8" class="cell" ></div> 
134                      <div id="9" class="cell" ></div> 
135                      <div id="0" class="cell" ></div> 
136                      <div id="reset" class="cell"  cell=not style="font-size:12px" >重填</div> 
137                      <div id="confirm" class="cell" cell=not style="font-size:12px"  >确定</div> 
138           
139             </div>
140         </div>
141         
142 </div>
143 </body>
144 </html>
145

这个的重难点到不在于特效，以前认为那些数据的操作和数学算法没有什么实际的用处现在看来，用处实在太大了！

还有就是要养成编程的好习惯，一定要注意节约资源和面向对象。

下一阶段的目标，要开发一些常用的JavaScript小插件，提高语句块的通用性，通过插件接口来进行逻辑处理。

posted on 2010-09-08 21:49 王小白阅读(1036) 评论(1) 收藏举报

刷新页面返回顶部