一个简单的卡动车排队系统
一、效果图
二、代码
1、admin.html
<html>
<head>
<meta charset="UTF-8">
<title>卡丁车</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.img-style{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:140px;
background-color:#0B87F7;
height:22%;
overflow:hidden;
}
.img-style img{
vertical-align:middle;
margin-left:30%;
margin-right:10%;
}
.text-style{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:140px;
margin-left:5%;
margin-right:5%;
background-color:#0B87F7;
height:19%;
overflow:hidden;
}
.row-margin{
margin-top:2%;
}
.back-color{
background-color:#0B87F7;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function show(){
var row0 = document.getElementById("row0").value;
var row1 = document.getElementById("row1").value;
var row2 = document.getElementById("row2").value;
if(isNaN(row0)){
alert("请输入数字");
return;
}
if(isNaN(row1)){
alert("请输入数字");
return;
}
if(isNaN(row2)){
alert("请输入数字");
return;
}
location.href="kadingche.html?row0="+row0+"&row1="+row1+"&row2="+row2;
}
</SCRIPT>
</head>
<body style="background-color:#191919;color:#FFF;">
<div class="row row-margin" style="margin-top:10%">
<div class="col-lg-3 text-style">第<input type="text" id="row0" style="width:30%"></span>组</div>
<div class="col-lg-7 back-color">
<div class="img-style">
<img src="img/ongoing.png"></img>
</div>
<div class="text-style">
驾驶进行中
</div>
</div>
</div>
<div class="row row-margin">
<div class="col-lg-3 text-style">第<input type="text" id="row1" style="width:30%"></span>组</div>
<div class="col-lg-7 back-color">
<div class="img-style">
<img class="imgStyle" src="img/helmet.png"></img>
</div>
<div class="text-style">
戴头盔准备
</div>
</div>
</div>
<div class="row row-margin">
<div class="col-lg-3 text-style">第<input type="text" id="row2" style="width:30%"></span>组</div>
<div class="col-lg-7 back-color">
<div class="img-style">
<img class="imgStyle" src="img/waiting.png"></img>
</div>
<div class="text-style">
排队等待中
</div>
</div>
</div>
<div style="bottom:0px;right:0px;position: fixed">
<input type="button" class="btn btn-primary" value="保存" onclick="show()"/>
</div>
<body>
</html>2.kadingche.html
<html>
<head>
<meta charset="UTF-8">
<title>卡丁车</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.img-style{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:140px;
background-color:#0B87F7;
height:22%;
overflow:hidden;
}
.img-style img{
vertical-align:middle;
margin-left:30%;
margin-right:10%;
}
.text-style{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:140px;
margin-left:5%;
margin-right:5%;
background-color:#0B87F7;
height:19%;
overflow:hidden;
}
.row-margin{
margin-top:2%;
}
.back-color{
background-color:#0B87F7;
}
</style>
</head>
<body style="background-color:#191919;color:#FFF;">
<div class="row row-margin" style="margin-top:10%">
<div class="col-lg-3 text-style">第<span id="row0" style="width:10%"></span>组</div>
<div class="col-lg-7 back-color">
<div class="img-style">
<img src="img/ongoing.png"></img>
</div>
<div class="text-style">
驾 驶 中
</div>
</div>
</div>
<div class="row row-margin">
<div class="col-lg-3 text-style">第<span id="row1" style="width:10%"></span>组</div>
<div class="col-lg-7 back-color">
<div class="img-style">
<img class="imgStyle" src="img/helmet.png"></img>
</div>
<div class="text-style">
戴头盔准备
</div>
</div>
</div>
<div class="row row-margin">
<div class="col-lg-3 text-style">第<span id="row2" style="width:10%"></span>组</div>
<div class="col-lg-7 back-color">
<div class="img-style">
<img class="imgStyle" src="img/waiting.png"></img>
</div>
<div class="text-style">
等 候 中
</div>
</div>
</div>
<div style="bottom:0px;left:0px;position: fixed">
<input type="button" class="btn btn-primary" value="上一轮" onclick="minus()"/>
</div>
<div style="bottom:0px;right:0px;position: fixed">
<input type="button" class="btn btn-primary" value="下一轮" onclick="add()"/>
</div>
<body>
<SCRIPT LANGUAGE="JavaScript">
function add(){
var row0=document.getElementById("row0").innerHTML;
var row0Value=eval(row0)+1;
document.getElementById("row0").innerHTML=row0Value;
var row1=document.getElementById("row1").innerHTML;
var row1Value=eval(row1)+1;
document.getElementById("row1").innerHTML=row1Value;
var row2=document.getElementById("row2").innerHTML;
var row2Value=eval(row2)+1;
document.getElementById("row2").innerHTML=row2Value;
}
function minus(){
var row0=document.getElementById("row0").innerHTML;
var row0Value=eval(row0)-1;
document.getElementById("row0").innerHTML=row0Value;
var row1=document.getElementById("row1").innerHTML;
var row1Value=eval(row1)-1;
document.getElementById("row1").innerHTML=row1Value;
var row2=document.getElementById("row2").innerHTML;
var row2Value=eval(row2)-1;
document.getElementById("row2").innerHTML=row2Value;
}
window.onload=function(){
var value = window.location.href;
if(value.lastIndexOf('?')=='-1'){
document.getElementById("row0").innerHTML="1";
document.getElementById("row1").innerHTML="2"
document.getElementById("row2").innerHTML="3";
}else{
var arr = value.substring(value.lastIndexOf('?') + 1,value.length).split('&');
if(arr.length!=0){
for(var i = 0; i < arr.length; i++){
var val=arr[i].split('=')[1];
var id="row"+i;
var elem=document.getElementById(id);
elem.innerText = val;
}
}
}
}
</SCRIPT>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016年05月26日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
