仿微信/支付宝支付密码界面htm

来源：互联网发布：八门神器ios源码编辑：程序博客网时间：2024/05/01 20:07

直接上源码：

<!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=gbk" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">

var count=0;//输入字符个数
var pwd="";//输入结果

$(document).ready(function() {
   $(".vkli").hover(
       function () {
           $(this).css({"background-color":"#3399cc"});
       },
       function () {
       $(this).css({"background-color":"#FFFFFF"});
       });
   //点击事件
   $(".vkli").bind('click',function(){
       if($(this).attr('id')=='vkbtnCancel'){//取消
              alert("cancel");
       }else if($(this).attr('id')=='vkbtnDelete'){//删除
           if(pwd.length>0){
               pwd=pwd.substring(0,pwd.length-1);
               //alert(pwd.substring(0,pwd.length-1));
               $(".li").eq(count-1).css({"background": ""});
               count--;
           }
       }else{//点击数字
           if(count>5){
               retrun;
           }
           pwd=pwd+$(this).html();
           count++;
           $(".li").eq(count-1).css({"background": "url('dot.png') no-repeat center 50%"});
           if(count==6){
               alert("输入结果："+pwd);
           }
       }


   });


});

</script>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#wrapper{
       margin:0 auto;
       width:80%;

}
#vk{
position:absolute;
bottom:5px;
left:50%;
margin-left:-120px;
}
#vk ul{
list-style-type:none;
text-align:center;

}

#vk ul .vkli{
width:80px;
line-height:80px;
height:80px;
vertical-align:middle;
text-align:center;
display:inline-block;
border : 1px solid #6d6d6d;
background-color:#FFFFFF;
FONT-SIZE:20px; COLOR: #000000;
}
#pwdShow{
margin-top:5px;
}
#pwdShow ul .li{
width:40px;
line-height:40px;
height:40px;
vertical-align:middle;
text-align:center;
display:inline-block;

border : 1px solid black;
border-right:none;
}

</style>

</head>
<body style="FONT-SIZE:16px; COLOR: #6d6d6d; LINE-HEIGHT:23px">
<div id="wrapper" style="text-align:center">
<div style="margin-top:10px">请输入支付密码</div>
<hr/>
<div style="margin-top:50px;font-size:25px;">支付金额：99.00</div>

   <div id="pwdShow" >
       <ul>
           <li class="li"></li><li class="li"></li><li class="li"></li><li class="li"></li><li class="li"></li><li class="li" style="border-right:1px solid black"></li>
       </ul>
   </div>
   <div id="vk" >
       <ul>
       <li class="vkli" style="border-right:none;">1</li><li class="vkli" style="border-right:none;">2</li><li class="vkli">3</li>
       </ul>
       <ul>
       <li class="vkli" style="border-right:none;border-top:none">4</li><li class="vkli" style="border-right:none;border-top:none">5</li><li class="vkli" style="border-top:none">6</li>
       </ul>
       <ul>
       <li class="vkli" style="border-right:none;border-top:none">7</li><li class="vkli" style="border-right:none;border-top:none">8</li><li class="vkli" style="border-top:none">9</li>
       </ul>
       <ul>
       <li class="vkli" id="vkbtnCancel" style="border-right:none;border-top:none">取消</li><li class="vkli" style="border-right:none;border-top:none">0</li><li class="vkli" id="vkbtnDelete" style="border-top:none">删除</li>
       </ul>
   </div>

</div>
</body>
</html>

下载链接：http://download.csdn.net/detail/yjg428/9292355

0 0