html+css+支付宝页面,HTML+CSS+JS简单实现支付宝付款界面效果

HTML+JS部分

Pay

var password="";

function clean(){

if(password.length>0){

password=password.substr(0,password.length-1);

}

for(var i=5;i>=0;i--){

var pwd=document.form.p[i];

if(pwd.value!=""){

pwd.value="";

break;

}

}

}

function put(m){

for(var i=0;i<6;i++){

var pwd=document.form.p[i];

if(pwd.value==""){

pwd.value=m;

password+=m;

break;

}

}

if(document.form.p[5].value!=""){

alert(password);

}

}

请输入支付密码

忘记密码？

1	2	3
4	5	6
7	8	9
	0

CSS部分

body{

background: #333;

}

.box{

width:660px;

height: 425px;

background:#fff;

margin:30px auto;

border-radius:10px;

}

.logo{

width:320px;

height: 325px;

margin:50px auto;

position: absolute;

border-radius:10px;

}

.log{

width:300px;

height: 310px;

position: absolute;

margin:10px 10px;

border-radius:10px;

}

.pay{

width:320px;

height: 375px;

background:#fff;

position: absolute;

margin:25px 320px;

}

.top{

width:320px;

height: 45px;

line-height: 45px;

text-align: center;

background:RGB(247,246,245);

border-bottom: 1px solid RGB(230,230,230);

}

.close{

width:25px;

height:25px;

float: left;

margin:-35px 10px;

}

.close:hover{

width:27px;

height:27px;

}

.in{

width:320px;

height: 130px;

background:RGB(247,246,245);

}

.pwd{

width:277px;

height:46.5px;

border-radius: 6px;

position: absolute;

margin:20px 27px;

}

input{

width:43px;

height:43px;

position: relative;

margin:-1px -3px;

background:RGB(245,245,245);

border:0.5px solid RGB(230,230,230);

border-top:0.5px solid RGB(200,200,200);

border-bottom:0.5px solid RGB(200,200,200);

text-align: center;

line-height: 43px;

}

.left{

border-left:0.5px solid RGB(200,200,200);

border-radius: 3px 0 0 3px;

}

.right{

border-right:0.5px solid RGB(200,200,200);

border-radius: 0 3px 3px 0;

}

.key{

width:320px;

height: 200px;

}

table{

width:320px;

height: 200px;

border-collapse: collapse;

border-spacing: 0px;

border:1px solid RGB(230,230,230);

}

td{

width: 106.3px;

height: 45px;

text-align: center;

border:1px solid RGB(230,230,230);

font-size:15px;

color:#000;

}

td:hover{

background:RGB(247,246,245);

}

.back{

width:40px;

height: 30px;

}

.back:hover{

width:45px;

height: 35px;

}

图片资源

效果图

闲出屁来了整了个这玩意，欢迎大家提出宝贵意见！