android 支付数字键盘,仿微信支付的数字键盘

HTML 内容部分

确认支付

x

￥5000.00

请输入支付密码

支付方式

余额

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 0
• 

css样式部分

/* CSS RESET */

* {

padding: 0;

margin: 0;

}

body {

font: 12px "微软雅黑", Arial;

background: #efeff4;

min-width: 320px;

max-width: 640px;

color: #000;

}

a {

text-decoration: none;

color: #666666;

}

a,

img {

border: none;

}

img {

vertical-align: middle;

}

ul,

li {

list-style: none;

}

em,

i {

font-style: normal;

}

.clear {

clear: both

}

.clear_wl:after {

content: ".";

height: 0;

visibility: hidden;

display: block;

clear: both;

}

.fl {

float: left

}

.fr {

float: right

}

.all_w {

width: 91.3%;

margin: 0 auto;

}

/*基础字体属性*/

.f10 {

font-size: 10px

}

.f11 {

font-size: 11px

}

.f12 {

font-size: 12px

}

.f14 {

font-size: 14px

}

.f13 {

font-size: 13px

}

.f16 {

font-size: 16px

}

.f18 {

font-size: 18px

}

.f20 {

font-size: 20px

}

.f22 {

font-size: 22px

}

.f24 {

font-size: 24px

}

.f26 {

font-size: 26px

}

.f28 {

font-size: 28px

}

.f32 {

font-size: 32px

}

.fb {

font-weight: bold

}

/********/

.header {

width: 100%;

height: auto;

margin: 0 auto;

overflow: hidden;

}

.gofh {

float: left;

height: 45px;

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;

}

.gofh a {

padding-right: 10px;

border-right: 1px solid #2e2f33;

}

.gofh a img {

width: 40%;

}

.ttwenz {

float: left;

height: 45px;

}

.ttwenz h4 {

font-size: 16px;

font-weight: 400;

margin-top: 2px;

}

.ttwenz h5 {

font-size: 12px;

font-weight: 400;

color: #6c7071;

}

.wenx_xx {

text-align: center;

font-size: 16px;

padding: 18px 0;

}

.wxzf_price {

font-size: 32px;

text-align: center

}

.center{

text-align: center;

font-size: .426667rem

}

.skf_xinf {

height: 43px;

border-top: 1px solid #ddd;

border-bottom: 1px solid #ddd;

line-height: 43px;

background: #FFF;

font-size: 12px;

overflow: hidden;

}

.skf_xinf .bt {

color: #767676;

float: left;

}

.ljzf_but {

border-radius: 3px;

height: 45px;

line-height: 45px;

background: #44bf16;

display: block;

text-align: center;

font-size: 16px;

margin-top: 14px;

color: #fff;

}

/**/

.ftc_wzsf {

display: none;

width: 100%;

height: 100%;

position: fixed;

z-index: 999;

top: 0;

left: 0;

}

.ftc_wzsf .hbbj {

width: 100%;

height: 100%;

position: absolute;

z-index: 8;

background: #000;

opacity: 0.4;

top: 0;

left: 0;

}

.ftc_wzsf .srzfmm_box {

position: absolute;

z-index: 10;

background: #f8f8f8;

width: 88%;

left: 50%;

margin-left: -44%;

top: 25px;

}

.qsrzfmm_bt {

font-size: 16px;

border-bottom: 1px solid #c9daca;

overflow: hidden;

}

.qsrzfmm_bt a {

display: block;

width: 10%;

padding: 10px 0;

text-align: center;

}

.qsrzfmm_bt img.tx {

width: 10%;

padding: 10px 0;

}

.qsrzfmm_bt span {

padding: 15px 5px;

}

.zfmmxx_shop {

text-align: center;

font-size: 12px;

padding: 10px 0;

overflow: hidden;

}

.zfmmxx_shop .mz {

font-size: 14px;

float: left;

width: 100%;

}

.zfmmxx_shop .wxzf_price {

font-size: 24px;

float: left;

width: 100%;

}

.blank_yh {

width: 89%;

margin: 0 auto;

line-height: 40px;

display: block;

color: #636363;

font-size: 16px;

padding: 5px 0;

overflow: hidden;

border-bottom: 1px solid #e6e6e6;

border-top: 1px solid #e6e6e6;

}

.blank_yh img {

height: 100%;

}

.ml5 {

margin-left: 5px;

}

.mm_box {

width: 89%;

margin: 10px auto;

height: 40px;

overflow: hidden;

border: 1px solid #bebebe;

}

.mm_box li {

border-right: 1px solid #efefef;

height: 40px;

float: left;

width: 16.3%;

background: #FFF;

}

.mm_box li.mmdd {

background: #FFF url(../images/dd_03.jpg) center no-repeat;

background-size: 25%;

}

.mm_box li:last-child {

border-right: none;

}

.xiaq_tb {

width: 100%;

text-align: center;

}

.xiaq_tb img{

width: 100%;

}

.numb_box {

position: absolute;

z-index: 10;

overflow: hidden;

background: #f5f5f5;

width: 100%;

bottom: 0px;

/* border-radius: 1.33333rem; */

border-top-left-radius: 1.33333rem;

border-top-right-radius: 1.33333rem;

}

.nub_ggg {

border: 1px solid #dadada;

overflow: hidden;

border-bottom: none;

}

.nub_ggg li {

width: 33.3333%;

border-bottom: 1px solid #dadada;

float: left;

text-align: center;

font-size: 22px;

}

.nub_ggg li a {

display: block;

color: #000;

height: 50px;

line-height: 50px;

overflow: hidden;

}

.nub_ggg li a:active {

background: #e0e0e0;

}

.nub_ggg li a.zj_x {

border-left: 1px solid #dadada;

border-right: 1px solid #dadada;

}

.nub_ggg li span {

display: block;

color: #e0e0e0;

background: #e0e0e0;

height: 50px;

line-height: 50px;

overflow: hidden;

}

.nub_ggg li span.del img {

width: 30%;

}

.fh_but {

position: absolute;

right: 0px;

top: 12px;

font-size: 14px;

color: #20d81f;

}

.zfcg_box {

background: #f2f2f2;

height: 56px;

line-height: 56px;

font-size: 20px;

color: #1ea300;

}

.zfcg_box img {

width: 10%;

}

.cgzf_info {

background: #FFF;

border-top: 1px solid #dfdfdd;

}

.spxx_shop {

background: #FFF;

margin-left: 4.35%;

border-top: 1px solid #dfdfdd;

padding: 10px 0;

}

.spxx_shop td {

color: #7b7b7b;

font-size: 14px;

padding: 10px 0;

}

.wzxfcgde_tb {

position: fixed;

width: 100%;

z-index: 999;

bottom: 20px;

text-align: center;

}

.wzxfcgde_tb img {

width: 20.6%;

}

.mlr_pm {

margin-right: 4.35%;

}

.x{

position: absolute;

right: 1rem;

color: #fff;

font-size: 1.64rem

}

.aa{

vertical-align:middle

}

script 部分

$(function(){

//出现浮动层

$(".ljzf_but").click(function(){

$(".ftc_wzsf").show();

});

//关闭浮动

$(".x").click(function(){

$(".ftc_wzsf").hide();

});

//数字显示隐藏

// $(".xiaq_tb").click(function(){

// $(".numb_box").slideUp(500);

// });

$(".mm_box").click(function(){

$(".numb_box").slideDown(500);

});

//----

var i = 0;

$(".nub_ggg li a").click(function(){

i++

if(i<6){

$(".mm_box li").eq(i-1).addClass("mmdd");

}else{

$(".mm_box li").eq(i-1).addClass("mmdd");

setTimeout(function(){

location.href="1.html"; //输入完毕密码跳转

},500);

//window.document.location="cg.html"

}

});

$(".nub_ggg li .del").click(function(){

if(i>0){

i--

$(".mm_box li").eq(i).removeClass("mmdd");

i==0;

}

//alert(i);

});

});