仿微信支付的数字键盘

HTML 内容部分

<div class="pay">
<button type="button" class="ljzf_but" >确认支付</button>
</div>
<div class="ftc_wzsf">
<div class="numb_box">
<div class="x">x</div>
<div class="xiaq_tb"> <img class="" src="images/微信图片_20190824170607.png" height="50"> </div>
<div class="wxzf_price">￥5000.00</div>
<div class="center">请输入支付密码</div>
<ul class="mm_box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="blank_yh">
<span class="fl ml5">支付方式</span>
<span class="fr">余额
<span style="display:inline-block; height: 15px;" >
<img src="images/微信图片_20190824170616.png">
</span>
</span>
</div>

<ul class="nub_ggg">
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);" class="zj_x">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">4</a></li>
<li><a href="javascript:void(0);" class="zj_x">5</a></li>
<li><a href="javascript:void(0);">6</a></li>
<li><a href="javascript:void(0);">7</a></li>
<li><a href="javascript:void(0);" class="zj_x">8</a></li>
<li><a href="javascript:void(0);">9</a></li>
<li><span></span></li>
<li><a href="javascript:void(0);" class="zj_x">0</a></li>
<li><span class="del" > <img src="images/jftc_18.jpg" ></span></li>
</ul>
</div>
</div>

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 部分

<script type="text/javascript">
$(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);
});
});
</script>

转载于:https://www.cnblogs.com/Progress-/p/11424395.html