美文网首页
【黔大溪的日常】绘一个超简单的收银界面,直接可用喔

【黔大溪的日常】绘一个超简单的收银界面,直接可用喔

作者: 熙如意Xiry8881 | 来源:发表于2024-03-29 12:15 被阅读0次

    无聊?,不如看看/听听

    熙视听 Music | Past Lives - Slushii


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title id="tn">服务中心(pay.Kweichow-Qlt.xyz)</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{margin:-1px auto;padding:5px 8px;width:100%;line-height:35px;background:#f3f3f3;color:#666;}

    .head0{margin:-1px auto;padding:5px 0;width:100%;line-height:35px;background:#f3f3f3;color:#666;text-align:center;}

    .head0 div{margin:0 auto;width:35px;height:35px;}

    .qbline{margin:0 auto;padding:0 4px;line-height:35px;text-align:left;}

    .qbline li{float:left;margin:5px auto;padding:5px 0;line-height:35px;width:100%;color:#999;background:#fff;}

    .qbline div{float:right;color:#ccc;}

    .qbline li:hover{background:#f9f9f9;}

    .tabline{margin:0 10px;padding:0;line-height:22px;height:95px;text-align:center;background:#6699CC;color:#f9f9f9;border-radius:5px;}

    .tabline li{float:left;margin:0 auto;line-height:34px;width:50%;}

    .tabline div{margin:0 auto;padding:0 8px;font-size:22px;}

    .tabline p{margin:0 auto;padding:0 8px;font-size:14px;text-align:left;}

    .tabline span{margin:0 auto;padding:0 8px;font-size:12px;}

    .tabline{margin:0 10px;padding:0;line-height:22px;height:95px;text-align:center;background:#6699CC;color:#f9f9f9;border-radius:5px;}

    .czlist{margin:5px auto;padding:0 8px;line-height:35px;height:35px;width:100%;}

    .czlist li{float:left;margin:0 auto;line-height:34px;width:20%;color:#999}

    .czlist .on{color:#666;}

    .czlist .on div{margin:0 auto;width:20px;height:2px;background:#999;}

    .page{margin:0 auto;width:100%;line-height:35px;background:#000;color:#999;bottom:0;left:0;right:0;position:fixed;text-align:center;}

    .show{display:block;}

    .hidden{display:none;}

    .l{float:left;}

    .r{float:right;}

    </style>

    </head>

    <body>

    <div class="hidden" id="t_b0">

    <div class="head0">

    <div class="l" onclick="go()">←</div>

    我的余额

    <div class="r"></div>

    </div>

    <div class="tabline">

    <ul>

    <li>

    <div id="a1">0.00</div><span>余额</span>

    </li>

    <li>

    <div id="a2">0.00</div><span>兜哩金</span>

    </li>

    </ul>

    </div>

    <div class="czlist" id="cz">

    <ul>

    <li onclick="o_0_0(0)" class="on">余额明细<div></div></li>

    <li onclick="o_0_0(1)">充值记录<div></div></li>

    </ul>

    </div>

    <div class="show" id="c_l0"></div>

    <div class="hidden" id="c_l1"></div>

    </div>

    <div class="hidden" id="t_b1">

    <div class="head0">

    <div class="l" onclick="go()">←</div>

    我的收益

    <div class="r"></div>

    </div>

    </div>

    <div class="hidden" id="t_b2">

    <div class="head0">

    <div class="l" onclick="go()">←</div>

    优惠券

    <div class="r"></div>

    </div>

    </div>

    <div class="hidden" id="t_b3">

    <div class="head0">

    <div class="l" onclick="go()">←</div>

    代金券

    <div class="r"></div>

    </div>

    </div>

    <div class="" id="t">

    <div class="head0">

    <div class="l" onclick="gol()">←</div>

    我的钱包

    <div class="r"></div>

    </div>

    <div class="tabline">

    <p>我的资产</p>

    <ul>

    <li>

    <div id="a3">0.00</div>

    <span>余额 ></span>

    </li>

    <li>

    <div id="a4">0.00</div>

    <span>收益 ></span>

    </li>

    </ul>

    </div>

    <ul class="qbline" id="q_list">

    <li onclick="o_0(0)">我的余额<div>></div></li>

    <li onclick="o_0(1)">我的收益<div>></div></li>

    <li onclick="o_0(2)">优惠券<div>></div></li>

    <li onclick="o_0(3)">代金券<div>></div></li>

    </ul>

    </div>

    <script>

    var t=document.getElementById('t');

    var ql= document.getElementById('q_list');

    var lis=ql.getElementsByTagName('li');

    function o_0(p){

    for(var i=0;i<lis.length;i++){

    document.getElementById('t_b'+i).className="hidden";

    t.className="show";

    }

    document.getElementById('t_b'+p).className="show";

    t.className="hidden";

    }

    var cz=document.getElementById('cz');

    var lis0=cz.getElementsByTagName('li');

    function o_0_0(p){

    for(var i=0;i<lis0.length;i++){

    lis0[i].className="";

    document.getElementById('c_l'+i).className="hidden";

    }

    lis0[p].className="on";

    document.getElementById('c_l'+p).className="show";

    }

    function go(){

    o_0()

    }

    function gol(){

    window.history.back()

    }

    o_0_0(0)

    function g(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    var r = window.location.search.substr(1).match(reg);

    if(r != null) {

    return decodeURI(r[2]);

    }

    return null;

    }

    var cc=localStorage.getItem('code');

    var a=g("a");

    var b=g("b");

    var c=g("c");

    var id=g("pid");

    var a_1=document.getElementById('a1');

    var a_2=document.getElementById('a2');

    var a_3=document.getElementById('a3');

    var a_4=document.getElementById('a4');

    if(id==cc){

    a_1.innerText=a*1;//余额,

    a_2.innerText=b*1;//兜哩金

    a_3.innerText=a*1+b*1+c/100;//余额

    a_4.innerText=c*1/100;//收益

    }else{

    alert("无权访问");

    //gol()

    }

    </script>

    </body>

    </html>


    嘛咪嘛咪哄,嘻嘻,上菜了>收银界面哟

    相关文章

      网友评论

          本文标题:【黔大溪的日常】绘一个超简单的收银界面,直接可用喔

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