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

最新推荐文章于 2021-06-19 12:26:27 发布

dreamboycx

最新推荐文章于 2021-06-19 12:26:27 发布

阅读量835

点赞数

分类专栏：前端设计

本文链接：https://blog.csdn.net/dreamboycx/article/details/8494434

版权

前端设计专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!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>

dreamboycx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似于计算器的密码输入框写法

输入密码$(function(){ //关闭密码输入框 $("#shutdown").click(function(){ $("#pwd").hide(); }); //点击文本框显示密码输入框 $(":input[name=mypwd]").click(function(){ $("#pwd").show(); }); //处理密码框点击事件
复制链接

扫一扫

专栏目录