一个简单的卡动车排队系统

最新推荐文章于 2024-04-05 14:49:07 发布
最新推荐文章于 2024-04-05 14:49:07 发布
阅读量961 收藏 1
点赞数
分类专栏： # Html/CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxq0816/article/details/51506212
版权
Html/CSS 专栏收录该内容
32 篇文章 232 订阅 ¥99.90 ¥99.00
订阅专栏

一、效果图

二、代码

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="保存" οnclick="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="上一轮" οnclick="minus()"/>
</div>
<div style="bottom:0px;right:0px;position: fixed">
	<input type="button" class="btn btn-primary" value="下一轮" οnclick="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.οnlοad=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>


AI算法攻城狮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
C++：排队叫号系统(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
12-27 1462
C++：排队叫号系统(附完整源码)
排队叫号机源代码
03-04
排队叫号系统，包括客户端，服务器，叫号端。可以语音，可以LED显示窗口，可以定制业务等。使用MYSQL数据库。需要的可以下载看看
ssm/php/node/python即刻实时预约排队系统
果果 程序设计
01-27 854
从社会层面来看，该系统能够减少顾客在排队中的无效等待时间，提高生活质量，使人们可以将这段时间用于工作、学习或其他更有价值的活动。同时，良好的顾客体验也能促进顾客忠诚度的提升，为企业带来更多的回头客。研究并实现即刻实时预约排队系统，不仅是技术进步的体现，也是社会发展需求的响应，具有重要的现实意义和广阔的发展前景。在当今快节奏的社会中，时间的价值愈发凸显，人们对于效率的追求也日益增强。随着信息技术的发展，即刻实时预约排队系统应运而生，它通过数字化手段对排队过程进行管理和优化，旨在解决传统排队方式中存在的问题。
php毕业设计之医院就诊挂号排队叫号系统vue
专注分享bishe530的博客
05-07 396
在现今的各大医院，特别是医疗水平高的知名的医院，门诊拥挤成为医院需要解决的一个重大问题，再加上时常出现的门诊插队现象，这些都势必严重影响到医院秩序以及医院的服务质量等各个方面。4、提高了医院的服务质量，节约了医院资源，取得更好的社会效益和经济效益。随着信息技术的不断发展，网上预约挂号技术会越来越完善，系统也会越来越成熟，先进的预约挂号系统会带给人们更优质的医疗服务，更高科技的医疗保障。3、改善了医院就诊高峰期门诊拥挤的情况，疏散了医院病人的流量，改善了医院环境，节约了医院的管理成本。服务器：apache。
基于PHP+Mysql+Html+CSS餐厅网站和座位预约系统设计与实现
最新发布
杭州.黄老师
04-05 1262
基于PHP+Mysql+Html+CSS餐厅网站和座位预约系统设计与实现毕业设计成品源代码，黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
javaH5醉美南湾湖网站设计计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
m0_73432617的博客
09-19 208
javaH5醉美南湾湖网站设计计算机毕业设计MyBatis+系统+LW文档+源码+调试部署。jsp+sqlserver基于JSP的养老院老人日常生活管理系统。springboot校园二手电动车交易平台的设计与实现。ssm基于VUE.js的保护环境的App的开发与实现。springboot大学生心理咨询管理系统。springboot衣橱系统的设计与实现。jsp高校学生成绩网络系统的设计与实现。
基于私有云的卡调系统建设
07-12
主要阐述了利用虚拟存储和服务器群集及虚拟化技术,构建了卡调系统的数据中心,形成Iaas模式的最小私有云平台,通过群集保证企业数据的安全性和服务的稳定性,提高了资源的利用率并降低投入成本,方便企业对项目进行灵活...
无处不在的卡支付系统
02-25
UbiquitousCardPaymentSystem- 下载所有必需的库
PHP点评系统（开源代码）
04-24
开源代码，学习无忧，可通过源码学习PHP开发的具体细节，适用于初学PHP语言的学者。
行业文档-设计装置-一种综合的卡前置交换处理平台.zip
08-22
行业文档-设计装置-一种综合的卡前置交换处理平台.zip
拳皇2015 一个简单的java制作的卡牌游戏 双方轮流选人 然后对战.zip
12-17
使用java开发的游戏项目源码，可用于毕业设计、课程设计、练手学习等
滚动条下拉时 table 的thead 固定在网页固定在顶部不动
热门推荐
06-17 2万+
一、效果图 二、前端页面 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 场地预定 .table-chang{margin-left: 0px
HTML在手机端禁止放大缩小
06-08 2万+
CSS设置鼠标滑过Table表格时，相应行的背景颜色
11-17 1万+
.table>tbody>tr:hover { background-color: #fff; }
CSS Table 整体居中显示
11-19 1万+
第一步：在table外面套一个div，设样式margin:0 auto 第二步：table 设样式margin:0 auto 完成
图片选中效果 css
10-29 1万+
一、图片选中效果图： 二、CSS .pic_box{ width:900px;} .pic_box li{ width:204px; height:154px;list-style-type:none; float:left; margin:16px; border:2px solid; border-color: #FFFFFF; position:relative} .del
提供一个读typeb卡的卡号例程
06-06
以下是一个使用libnfc库读取Type B卡卡号的C++例程： ```cpp #include #include int main(int argc, char *argv[]) { nfc_context *context; nfc_device *pnd; nfc_init(&context); if (context == NULL) {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AI算法攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值