<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
<meta name="renderer" content="webkit"><!--360渲染模式-->
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
<title>托管费用</title>
<link rel="stylesheet" href="../../css/basic.css">
<style type="text/css">
/*以下为支付弹框*/
.pwd-box{
height: 1rem;
margin: auto;
width: 99%;
padding-left: 1px;
position: relative;
overflow: hidden;
}
.pwd-box input[type="tel"]{
width: 99%;
height: 0.8rem;
color: transparent;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 0.25rem;
opacity: 0;
z-index: 1;
letter-spacing: 0.636rem;
}
.fake-box input{
border-bottom: 1px solid black;
float: left;
z-index: 99999;
width: 0.8rem;
height: 0.8rem;
border-right: 1px solid black;
text-align: center;
font-size: 0.25rem;
border-top: 1px solid black;
}
.fake-box input:first-child{
border-top-left-radius: 0.2rem;
border-left: 1px solid black;
border-bottom-left-radius: 0.2rem;
}
.fake-box input:last-child{
border-top-right-radius: 0.2rem;
border-right: 1px solid black;
border-bottom-right-radius: 0.2rem;
}
.hide{display: none}
.body-area{
z-index: 999999;
position: fixed;
width: 378px;
height: 566px;
background-color: black;
opacity: 0.5;
top: 0;
}
.pwd-area{
width: 100%;
height: 100%;
position: absolute;
padding-top: 1rem;
top: 0rem;
}
.pwd-input-area{
text-align: center;
width: 6rem;
height: 3rem;
margin: auto;
background-color: white;
margin-top: 1rem;
position: relative;
}
.inputPwdArea{
line-height: 1rem;
font-size: 0.28rem}
.fake-box{
height: 0.9rem;
width: 5rem;
position: relative;
margin: auto;
}
.prompt-error{
color: #F23A38;
line-height: 1rem;
font-size: 0.28rem;
}
/*以下为主页*/
.pay-info-area{
padding-top: 0.5rem;
height: auto;
width: 90%;
margin: auto;
}
.pay-ul ul{
/*background-color: #00a0e9;*/
}
.pay-ul li{
position: relative;
height: 1.2rem;
width: 100%;
border-bottom: 1px solid #e3e3e3;
}
.li-type{
line-height: 1.6rem;
display: block;
color: #363636;
font-size: 0.28rem;
height: 100%;
width: 18%;
left: 0;
}
.input-area{
color: #666;
background-color: transparent;
font-size: 0.28rem;
width: 76%;
position: absolute;
right: 0;
bottom: 0.15rem;
height: 0.5rem;
padding-left: 6%;
outline: none;
}
.agreement a{
position: absolute;
left: 0.5rem;
top: 0.1rem;
color: #666;
font-size: 0.28rem;
}
.addMoney-btn-area{
width: 50%;
height: 0.8rem;
margin: 0.8rem auto;
}
.addMoney-btn{
height: 100%;
width: 100%;
background-color: #F23A38;
border-radius: 10px;
outline: none;
color: white;
font-size: 0.28rem;
}
.hidePayArea{display: none}
/*以下为优惠券*/
.cunPonList{
padding-top: 0.3rem;
width: 100%;
height:auto;
overflow: hidden;
padding-bottom: 0.3rem;
}
.cunPonList li{
float: left;
width: 36%;
margin: 0 6%;
height:1.2rem;
border: 1px solid #ADADAD;
position: relative;
}
.used,.use{
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.used{color: #363636;}
.use{color: #F23A38}
.use .try-cunPon{background-color: #F23A38}
.use .money-type{left: 0.1rem}
.use .money-num{left: 0.3rem}
.money-type{
font-size: 0.15rem;
position: absolute;
bottom: 0.3rem;
left: 0.2rem;
}
.money-num{
position: absolute;
font-size: 0.7rem;
bottom: 0.2rem;
left: 0.5rem;
}
.try-cunPon{
padding: 0 0.1rem;
background-color: #363636;
color: white;
font-size: 0.25rem;
position: absolute;
right: 0.3rem;
top: 0.2rem;
}
.font-cunPon{
position: absolute;
bottom: 0.3rem;
font-size: 0.23rem;
right: 0.3rem;
}
</style>
<script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
<ul>
<a class="back-a" href="javascript:history.back(-1)"></a>
<li>托管费用</li>
</ul>
</div>
<div class="main-body-area">
<div class="pay-info-area">
<ul class="pay-ul">
<li>
<span class="li-type">托管金额</span>
<input class="input-area" readonly type="text" value="100.00">
</li>
<li>
<span class="li-type">实际支付</span>
<input class="input-area" readonly type="text" value="90.00">
</li>
<li style="border-bottom: none;">
<span class="li-type" style="width: 100%">可用优惠券</span>
</li>
</ul>
</div>
<ul class="cunPonList">
<li>
<a href="#" class="used">
<span class="money-type">￥</span>
<span class="money-num">5</span>
<span class="try-cunPon">点击使用</span>
<span class="font-cunPon">无门槛优惠</span>
</a>
</li>
<li>
<a href="#" class="use">
<span class="money-type">￥</span>
<span class="money-num">10</span>
<span class="try-cunPon">点击使用</span>
<span class="font-cunPon">无门槛优惠</span>
</a>
</li>
</ul>
<div class="addMoney-btn-area">
<button class="addMoney-btn">托管</button>
</div>
</div>
<!--主体-->
<div class="controlPay hidePayArea" style="position: absolute;top: 0">
<div class="body-area" style="z-index: 10"></div>
<div class="pwd-area" style="z-index: 100">
<div class="pwd-input-area">
<span class="inputPwdArea">请输入钱包密码</span>
<div class="pwd-box">
<input type="tel" maxlength="6" class="pwd-input" id="pwd-input">
<div class="fake-box">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
</div>
</div>
<span class="prompt-error">输入错误，请重新输入</span>
</div>
</div>
</div>
<script src="../../lib/jquery/jquery.min.js"></script>
<script src="../../lib/check/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function () {
$('.body-area').css('width', $(window).width() + 'px')
.css('height', $(window).height() + 'px')
.css('background-color','black').css('opacity','0.5');
$('.controlPay').css('width', $('.body-area').width() + 'px')
.css('height', $('.body-area').height() + 'px')
$(window).resize(function() {
$('.body-area').css('width', $(window).width() + 'px')
.css('height', $(window).height() + 'px');
$('.controlPay').css('width', $('.body-area').width() + 'px')
.css('height', $('.body-area').height() + 'px')
});
// document.documentElement.style.overflow = "hidden";禁止滚动
$('.addMoney-btn').click(function () {
$('.controlPay').removeClass('hidePayArea')
})
// $(".controlPay").hide();
})
</script>
<script>
var $input = $(".fake-box input");
$("#pwd-input").on("input", function() {
var pwd = $(this).val().trim();
for (var i = 0, len = pwd.length; i < len; i++) {
$input.eq("" + i + "").val(pwd[i]);
}
$input.each(function() {
var index = $(this).index();
if (index >= len) {
$(this).val("");
}
});
if (len == 6) {
//执行其他操作
alert("success 密码正确")
window.location.reload();
}
});
</script>
</body>
</html>
分享到：
相关推荐
标题“仿微信密码输入框，炒鸡简单的实现方式2”暗示了这是一个关于移动端UI设计的教程，主要关注如何创建类似微信应用中的密码输入框，而且这个实现方式非常简洁，只有150行代码。在开发中，我们经常追求代码的简洁...
【jQuery仿微信密码输入框】是一种常见的前端交互设计，它主要应用于移动应用或者网页中，让用户在输入密码时获得与微信、支付宝等应用相似的体验。这种设计通常包含六位数字的输入框，用户每输入一位数字，相应的...
标题为"仿微信密码输入框，炒鸡简单的实现方式"，描述中提到这个实现只有150行代码，易于理解，方便修改。 首先，我们要理解微信密码输入框的特点：通常显示为一串圆点，用户输入时每个圆点代表一个字符，当焦点...
SYBoxTextField是一个自定义的文本输入控件，它将传统密码输入框中的点（•）替换成了小方块，灵感直接来源于微信支付时的密码输入界面。在设计中，每个方块用于表示一个数字，当用户输入密码时，方块会相应地填充...
"仿支付宝/微信的密码输入框效果"是一个专为Android平台设计的项目，它旨在模仿支付宝和微信应用中的密码输入体验，提供一种既美观又安全的用户界面。这个项目包含了两个版本，一个适用于Eclipse开发环境，另一个...
标题“仿支付宝，微信密码输入框”指的是创建一个与支付宝和微信应用程序类似的密码输入界面。这种设计通常采用网格形式，用户点击后会显示或隐藏字符，以增加安全性并提高用户友好性。 描述中的“网格输入框，自定...
这个“仿微信支付宝的密码输入框”项目是针对移动应用开发者的一个实例，旨在帮助他们实现类似的密码输入体验。这种设计通常包括六位数字的密码输入，具有较高的安全性和用户体验。 首先，我们来看“密码输入框”的...
"仿微信支付密码输入框"的实现主要涉及到自定义View的知识，特别是EditText的扩展和定制。接下来，我们将深入探讨这个话题。 首先，创建一个自定义的EditText子类是实现这个功能的关键步骤。这个自定义View需要覆盖...
Android仿支付宝、微信密码输入框效果 Android仿支付宝、微信密码输入框效果是Android开发中常见的一种密码输入方式，通过使用开源库GridPasswordView可以轻松实现该效果。下面将详细介绍该库的使用方法和相关功能...
【jQuery仿微信支付输入密码代码】是一个基于JavaScript库jQuery实现的模拟微信支付密码输入界面的代码资源。这个功能主要用于在网页上创建一个与微信支付类似的用户体验，用户可以在弹出的数字键盘上输入六位数字...
"仿微信/支付宝的自定义密码输入框" 是一个专为Android平台设计的自定义控件，它模仿了微信和支付宝应用程序中常见的密码输入界面，提供了一种既美观又实用的用户交互方式。 一、自定义控件的实现 自定义控件通常是...
"仿微信和支付宝的密码输入框"是一种常见的安全验证组件，广泛应用于移动支付和其他需要高强度安全保障的场景。这种设计不仅简洁直观，还能有效防止窥探，增强用户隐私保护。 一、密码输入框的设计原理 1. 分格显示...
Swift作为苹果公司的主要编程语言，提供了丰富的UI组件和工具，使得开发者能够创建出类似微信、支付宝那样功能强大且用户体验良好的密码输入框。本文将详细讲解如何在Swift中实现一个模仿微信、支付宝的密码输入框。...
本文将详细解析如何使用Swift语言创建一个仿微信支付的高可定制性的密码输入控件，该控件名为"SLPasswordInputView"。 首先，`SLPasswordInputView`是一个自定义视图，它允许用户输入并验证密码，同时提供了类似...
"安卓键盘输入相关-仿微信支付宝六位数密码输入框.zip"是一个示例项目，旨在模仿微信和支付宝应用中的六位数字密码输入框。这种输入框通常用于安全验证，比如设置或确认支付密码。 首先，我们来讨论一下这个项目的...
为了提高用户体验，微信密码输入框在切换模式时可能会有动画效果，如小眼睛图标的眼睛闭合和睁开。这通常通过自定义Drawable资源和`TransitionDrawable`来实现，根据状态切换两个不同的图标的可见性。 6. **安全...
自定义控件，仿微信支付页面和支付宝支付页面密码输入效果 此为示例代码，详解讲解请参考： http://blog.csdn.net/jakeyangchina/article/details/53338444如对资源内容有疑问，可以到博客中留言。
在移动应用开发中，尤其是涉及到金融交易或者安全性较高的功能时，仿微信、支付宝支付密码输入框的设计和实现显得尤为重要。这种特殊的密码输入框通常具有六位数字的形式，用户需要依次输入六位数字来完成支付验证。...
此外，为了达到与微信密码输入框相似的动画效果，我们可能还需要添加一些自定义的动画，比如字符出现和消失的动画。这可以通过Android的Animation API或者属性动画系统来实现。 至于布局文件，我们需要将`...