美文网首页
[黔大溪的日常]一个通小简单的支付金额输入页面

[黔大溪的日常]一个通小简单的支付金额输入页面

作者: 熙如意Xiry8881 | 来源:发表于2024-03-27 10:53 被阅读0次

    空了就→看看风景 、  熙视听 是你期待的“千千万万”吗

    <!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>


    QDX:01

    相关文章

      网友评论

          本文标题:[黔大溪的日常]一个通小简单的支付金额输入页面

          本文链接:https://www.haomeiwen.com/subject/mgqytjtx.html