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

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

作者: 熙如意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>


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

相关文章

  • 2018-10-13

    智慧社区商超管理系统 1、登陆界面实现的功能 为了更好的管理商超,此次界面是库管员和收银员的登录界面,实现的功能就...

  • 商超登录界面

    1. 登陆界面效果图: 2.登录界面实现的功能描述: (1)收银员或库管员登陆商超管理系统。 3. 登录界面各控件...

  • 任务2.3 系统主界面的制作

    1. 登录界面的效果图 2. 登录界面实现的功能描述 在登录界面输入收银员的账户密码,则进入收银员主界面;输入库管...

  • 2018-04-04(1)

    关于智慧商超管理系统的登陆界面详述文档 一、登陆界面的效果图 二、登陆界面实现的功能描述 对用户类型(收银员与库管...

  • 2018-03-16

    关于智慧商超管理系统的登陆界面详述文档 一、登陆界面的效果图 二、登陆界面实现的功能描述 对用户类型(收银员与库管...

  • 2018-03-16

    关于智慧商超管理系统的登陆界面详述文档 一、登陆界面的效果图 二、登陆界面实现的功能描述 对用户类型(收银员与库管...

  • C#商超系统

    实现智能商超系统库管员和收银员登陆系统时所用界面功能 private void button1_Click(obj...

  • 刚学习一个获取屏幕快照的方法

    这是返回image的方法 刚学发现一个直接把当前view的界面生成一个view的方法,可用来做动画效果

  • 2018-10-16

    1.登录界面的效果图 2. 登录界面实现的功能描述 超市收银员登录方式,默认收银员登录。 3. 登录界面各控件的参...

  • 智慧商超管理系统

    一、登录界面的效果图 二、登录界面实现的功能描述 登录界面默认用户类型为收银员,支持超市管理员和收银员的登录,密码...

网友评论

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

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