THML输入支付密码框

最新推荐文章于 2023-06-12 17:22:37 发布

风丶子

最新推荐文章于 2023-06-12 17:22:37 发布

阅读量560

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/gqf19891018/article/details/44061663

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no" />
		<title>密码框</title>
		<style type="text/css">
			* {border:0;margin: 0;font-family:Helvetica,Arial,sans-serif;}
			body {background: #481d16;}
			
			.kPwd {position: fixed;height: 90px;width: 100%;left:0px;top:50px;}
			.kBut {width: 258px;height: 45px;margin: 0 auto;position: relative;}
			.kButPwd1,.kButPwd2,.kButPwd3,.kButPwd4,.kButPwd5,.kButPwd6 {background: black;border-radius:50%;height: 20px;width: 20px;position: absolute;top:12px;}
			.kButPwd1 {left:12px;}
			.kButPwd2 {left:55px;}
			.kButPwd3 {left:98px;}
			.kButPwd4 {left:141px;}
			.kButPwd5 {left:182px;}
			.kButPwd6 {left:225px;}
			
			.Keyboard {position: fixed;height: 230px;background: #f5f5f5;_position:absolute;width: 100%;bottom: 0px;left:0px; }
			.key0 {height: 30px;line-height: 30px;text-align: center;cursor: pointer;}
			.key1,.key2,.key3,.key4 {height: 50px;border-top:1px solid #efefef;}
			.key1 div,.key2 div,.key3 div,.key4 div {float: left;width: 33%;text-align: center;line-height: 50px;cursor: pointer;font-size: 18px;font-weight: bold;}
			.key1 div:nth-child(2),.key2 div:nth-child(2),.key3 div:nth-child(2),.key4 div:nth-child(2) {border-left:1px solid #efefef;border-right:1px solid #efefef;}
			.key4 div:first-child,.key4 div:nth-child(3) {background: #e0e0e0;}
			.key4 div:nth-child(3) img {vertical-align: middle;}
		</style>
	</head>
	<body>
		<div class="kPwd">
			<div class="kBut" id="kBut"><img alt="" src="<%=basePath %>image/kPwd.png"></div>
			<div><input type="text" id="pwd" style="height: 30px;width: 140px;font-size: 18px;text-indent: 10px;margin-left: 10px;margin-top: 10px;display: none;" maxlength="6"/></div>
		</div>
		
		<div class="Keyboard" id="Keyboard">
			<div class="key0"> <img src="<%=basePath %>image/kHide.png"/> </div>
			<div class="key1"><div>1</div><div>2</div><div>3</div></div>
			<div class="key2"><div>4</div><div>5</div><div>6</div></div>
			<div class="key3"><div>7</div><div>8</div><div>9</div></div>
			<div class="key4"><div> </div><div>0</div><div> <img src="<%=basePath %>image/kDelete.png"/> </div></div>
		</div>
		
		<script type="text/javascript">
			//onclick/ontouchstart
			//Show or hide
			document.getElementsByClassName("key0")[0].onclick = function() {document.getElementsByClassName("Keyboard")[0].style.display="none";}
			document.getElementById("kBut").onclick = function() {document.getElementsByClassName("Keyboard")[0].style.display="block";}
			
			//Gets the object
			var dom1 = document.getElementsByClassName("key1")[0].children;
			var dom2 = document.getElementsByClassName("key2")[0].children;
			var dom3 = document.getElementsByClassName("key3")[0].children;
			var dom4 = document.getElementsByClassName("key4")[0].children;
			
			//Binding method
			for(var i=0;i<3;i++){
				dom1[i].onclick = function(event) {UpdatePwd(this.innerHTML);}
				dom2[i].onclick = function(event) {UpdatePwd(this.innerHTML);}
				dom3[i].onclick = function(event) {UpdatePwd(this.innerHTML);}
			}
			dom4[1].onclick = function(event) {UpdatePwd(this.innerHTML);}
			dom4[2].onclick = function(event) {UpdatePwd("-");}
			
			//
			function UpdatePwd(obj){
				var pwd = document.getElementById("pwd").value + "";
				if(obj == "-"){
					if(pwd.length==0){return;}
					pwd = pwd.substring(0,pwd.length-1);
				}else{
					if(pwd.length==6){return;}
					pwd = pwd + obj;
				}
				document.getElementById("pwd").value = pwd;
				showPwd("kBut",document.getElementById("pwd").value.length);
				//if(document.getElementById("pwd").value.length == 6) {alert("ok");}
			}
			
			//Display the password frame
			function showPwd(id,number) {
				var idObj = document.getElementById(id);
				var dom0 = idObj.children;
				if(dom0.length-1 < number){
					idObj.innerHTML = idObj.innerHTML + "<div class=\"kButPwd"+number+"\"></div>";;
				}else{
					idObj.removeChild(dom0[dom0.length-1]);
				}
			}	
		</script>
	</body>
</html>

风丶子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
THML输入支付密码框

<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> <meta name="viewport" content="widt
复制链接

扫一扫