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

无聊?,不如看看/听听

熙视听 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>


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,188评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,464评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,562评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,893评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,917评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,708评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,430评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,342评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,801评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,976评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,115评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,804评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,458评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,008评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,135评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,365评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,055评论 2 355

推荐阅读更多精彩内容