天天看点
返回

类似于计算器的密码输入框写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="{$keywords}" />
<meta name="Description" content="{$description}" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>输入密码</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.ico" />
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
<script type="text/javascript" src="themes/default/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="themes/default/js/common.js"></script>
<link href="themes/default/style/style.css" rel="stylesheet" type="text/css" />
<script>
$(function(){
  //关闭密码输入框
  $("#shutdown").click(function(){
    $("#pwd").hide();  
  });
  
  //点击文本框显示密码输入框
  $(":input[name=mypwd]").click(function(){
    $("#pwd").show();
  });
  
  //处理密码框点击事件
  $("#pwd li a").click(function(){
    var newnum = $(this).not("#shutdown,#delete").text();
    var oldnum = $(":input[name=mypwd]").val();
    //alert(oldnum);
    if(oldnum){
      var number = oldnum+newnum;
      $(":input[name=mypwd]").val(number);
    }else{
      $(":input[name=mypwd]").val(newnum);
    }
  });
  
  //删除密码框数字
  $("#delete").click(function(){
    var mynum = $(":input[name=mypwd]").val().replace(/.$/,'');
    $(":input[name=mypwd]").val(mynum);
  });
  
  //提交密码验证
  $("#sub").click(function(){
    showwait();
    var ac = $(":input[name=ac]").val();
    var mypwd = $(":input[name=mypwd]").val();
    $.ajax({
      data: "&ac="+ac+"&mypwd="+mypwd,
      type: "post",
      url: "getnum.php?time="+Math.random(),
      success: function (msg) {
        closewait();
        if(msg=="fail"){
          alert("密码错误！");
          return false;
        }else{
          window.location.href="getnum.php";
        }
      }
      });
  });
  
});

</script>
</head>

<body onselectstart="return false" οnselect="return false">
<div class="main"> 
  <!--二级导航-->
  <div class="subnav"> 
    <ul>
      <li><a href="qjd.php" class="n1"></a></li>
      <li><a href="zizhudiancai.php" class="n2"></a></li>
      <li class="cur"><a href="getnum.php?type=1" class="n3"></a></li>
      <li><a href="jtcx.php" class="n4"></a></li>
      <li><a href="yyxz.php" class="n5"></a></li>
    </ul>
  </div>
  <div class="home"><a href="index.php"><img src="images/btnhome.png"  /></a></div>
  
 <div class="pw">请填写密码：
  <form action="getnum.php" method="post" id="myform">
    <div class="pw_area"><span><input name="mypwd" type="text" /></span><a href="javascript:void(0);" id="sub"></a></div>
    <input type="hidden" name="ac" value="1" />
    </form>
    <ul id="pwd">
      <li><a href="javascript:void(0);">7</a></li>
        <li><a href="javascript:void(0);">8</a></li>
        <li><a href="javascript:void(0);">9</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);">6</a></li>
        <li><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);" id="delete">删除</a></li>
        <li><a href="javascript:void(0);">0</a></li>
        <li><a href="javascript:void(0);" id="shutdown">关闭</a></li>
    </ul>
  </div>
  <div class="btn_go_control"><a href="#"><img src="images/btn_go.png" /></a></div>
  
</div>
<OBJECT ID="jatoolsPrinter" CLASSID="CLSID:B43D3361-D975-4BE2-87FE-057188254255" codebase="themes/default/js/jatoolsP.cab#version=1,2,0,2" style="display:none;"></OBJECT>
</body>
</html>
php html
上一篇: python重写和重载的区别_（C#）重载和重写的区别
下一篇: 重写equals()方法就必须重写hashCode()方法

继续阅读