[黔大溪的日常]一个通小简单的支付金额输入页面
空了就→看看风景 、 熙视听 是你期待的“千千万万”吗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一起游Fu</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style>
*{margin:0;padding:0;list-style-type:none;}
body{margin: 0 auto;background:#f3f3f3;}
input,button{border:0;}
.head:hover{height:100%;background:#fff;line-height:32px;position:fixed;top:0;bottom:0;}
.head{margin:0 auto;padding:12px 16px;line-height:62px;height:5px;background:#09c7f7;transition:0.3s;overflow:hidden;}
.head0{margin:0 auto;padding:5px;line-height:32px;height:36px;background:#09c7f7;transition:0.3s;text-align:center;color:#f9f9f9;}
.head0 div{width:22px;height:22px;color:#f9f9f9;}
.head0 input{padding:4px 12px;line-height:22px;width:265px;border-radius:22px;color:#999;}
.tab{margin:0 auto;padding:5px 0;line-height:32px;text-align:center;font-size:14px;color:#999;}
.tab li{margin:0 auto;padding-left:5px;width:99%;line-height:42px;background:#fff;border-top:1px solid #f3f3f3;text-align:left;}
.tab li:hover{background:#f9f9f9;}
.tab div,.tab span{float:right;margin:0 auto;width:22px;height:22px;color:#ccc;}
.tab input{float:left:margin:0 auto;padding:5px 8px;width:86%;line-height:32px;}
.num{padding:10px 0;line-height:56px;height:65px;text-align:center;font-size:32px;}
.ts{font-size:14px;line-height:22px;}
.t0,.t1{margin:0 auto;padding:0;width:0;height:0;background:#fff;position:Fixed;bottom:0;transition:0.3s;overflow:hidden;}
.t0 li,.t1 li{float:left;margin:-1px;padding:0;width:33.2%;height:42px;text-align:center;border:1px solid #f3f3f3;}
.t1{width:100%;height:27%;overflow:auto;}
.page{margin:0 auto;padding:0;width:100%;height:100%;background:#f3f3f3;position:fixed;top:0;bottom:0;left:0;transition:0.3s;}
.page1{margin:0 auto;padding:0;width:100%;height:100%;background:#f3f3f3;position:fixed;top:0;bottom:0;right:0;left:0;transition:0.3s;}
.offpage{width:0;height:0;overflow:hidden;}
.offpage1{width:0;height:0;top:960px;overflow:hidden;}
.l{float:left;}
.r{float:right;}
.show{display:block;}
.hidden{display:none;}
</style>
</head>
<body>
<!--余额-->
<div class="page1" id="ye">
<div class="head0">
<div class="l" onclick="yecx()">←</div>
我的钱包
<div class="r" onclick="ufup()">￥</div>
</div>
<div class="tab" id="ky_je">
<ul>
<li class="num">
<p class="ts">可用余额(元) </p>
<em></em>
</li>
</ul>
</div>
<div class="tab t0" id="ky_num">
<ul>
<li onclick="p(0)">5</li>
<li onclick="p(1)">8</li>
<li onclick="p(2)">10</li>
<li onclick="p(3)">30</li>
<li onclick="p(4)">50</li>
<li onclick="p(5)">80</li>
<li onclick="p(6)">100</li>
<li onclick="p(7)">200</li>
<li onclick="p(8)">800</li>
<li onclick="ufup()">取消</li>
<li onclick="p(10)">0</li>
<li onclick="czqr()">确定</li>
</ul>
</div>
</div>
<script>
/*
Name:ufup
by:qiandaxi
url:Kweichow-Qlt(微信公众号id)
*/
function ufup(){
var xx=document.getElementById('ky_num');
if(xx.className=="tab t0"){
xx.className="tab t1";
}else{
xx.className="tab t0";
}}
function p(n){
var t=document.getElementById('ky_num').getElementsByTagName("li");
var e=document.getElementById('ky_je').getElementsByTagName("em")[0];
e.innerHTML=t[n].innerHTML;
}
function czqr(){
var e=document.getElementById('ky_je').getElementsByTagName("em")[0];
alert("充值金额为："+e.innerHTML+"元");
}
function yecx(){
window.history.back(-1)
}
</script>,
</body>
</html>
