THML输入支付密码框

来源：互联网发布：ubuntu sys cdefs.h 编辑：程序博客网时间：2024/05/01 11:44
<%@ 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 hidedocument.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 objectvar 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 methodfor(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 framefunction 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