*/
* Copyright (c) 2016，烟台大学计算机与控制工程学院
* All rights reserved.
* 文件名：test.html
* 作者：常轩
* 微信公众号：Worldhello
* 完成日期：2016年2月14日
* 版本号：V1.0
* 程序输入：无
* 程序输出：见运行结果
*/
<!DOCTYPE HTML>
<html>
<head>
<title>顾客信息填写</title>
<meta charset='utf-8'>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
font-family: sans-serif,Verdana, Helvetica, Arial;
}
#main{
padding-left: 350px;
}
.kv-item{
padding-left: 100px;
padding-bottom: 20px;
}
.kv-label{
display: inline;
height: 28px;
line-height: 28px;
margin-left: -100px;
float: left;
text-align: right;
width: 100px;
}
.text-align{
border:1px solid #474E63;
color: #0A1844;
height: 26px;
line-height:26px;
padding:0 2px;
width: 177px;
text-align: left;
}
#submit{
margin-left: 80px;
border:1px solid #474E63;
height: 26px;
font-weight: bold;
}
#reset{
border:1px solid #474E63;
height: 26px;
font-weight: bold;
}
</style>
<!--CSS部分结束-->
<!--此处插入JS代码-->
<script type="text/javascript">
function check(Form){
var check=true;
var flag=0;
for(i=0;i<1;i++){
if(Form.elements[i].value=="")
{alert(Form.elements[i].title+"不能为空！");
Form.elements[i].focus();
check=false;
return false;}
else{
alert("订单提交成功！");
}
}
return check;
}
function checkInt(o){
theV=isNaN(parseInt(o.value))?0:parseInt(o.value);
if(theV!=o.value){o.value=theV;}
txtTotal.value=txtAmount.value*20;
}
function checkP(o){
theV=isNaN(parseFloat(o.value))?0:parseFloat(o.value);
theV=parseInt(theV*100)/100;
if(theV!=o.value){
theV=(theV*100).toString();
theV=theV.substring(0,theV.length-2)+"."+theV.substring(theV.length-2,theV.length)
o.value=theV;
}
txtTotal.value=txtAmount.value*20;
}
function tishi(){
if(check(From)==true){
alert("订单提交成功！");
}
}
</script>
<!--JS代码结束-->
</head>
<body background="8.jpg">
<h1 align="center">顾客订单信息填写</h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="main">
<form name="personalForm" method="post" action="http://www.helloworld08.applinzi.com/dogFood/first.html" onSubmit="return check(this)">
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="name">姓名：</label>
</span>
<input type="text" name="name"class="text-align" id="name" style="border-radius:10px;border-color:green;" placeholder="*必填项" autofocus size="25" title="用户名" >
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="account">数 量：</label>
</span>
<input class="text-align" id=txtAmount style="border-radius:10px;border-color:green;" value=0 placeholder="*必填项" size="25" title="数量" onkeyup="checkInt(this);" onpaste="checkInt(this);" oncut="checkInt(this);" ondrop="checkInt(this);" onchange="checkInt(this);" >
<input class="text-align" style="border-left-width:0px;margin-left:-4px;width:18px;border-radius:10px;border-color:green;" value="kg" readonly>
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="danjia">单 价：</label>
</span>
<input class="text-align" id=txtPrice style="border-radius:10px;border-color:green;" value=20 placeholder="*必填项" size="25" title="单价" onkeyup="checkP(this);" onpaste="checkP(this);" oncut="checkP(this);" ondrop="checkP(this);" onchange="checkP(this);" style="border-right-width:0px;margin-right:0px;"readonly>
<input class="text-align" style="border-left-width:0px;margin-left:-4px;width:18px;border-radius:10px;border-color:green;" value="￥" readonly>
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="jinE">金 额：</label>
</span>
<input class="text-align" size="25" title="需付金额" id=txtTotal style="border-radius:10px;border-color:green;" value=0 style="border-right-width:0px;margin-right:0px;" readonly>
<input class="text-align" style="border-left-width:0px;margin-left:-4px;width:18px;border-radius:10px;border-color:green;" value="￥" readonly>
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="student">地 址：</label>
</span>
<table>
<tr>
<th>
<select>
<option value="省、直辖市">省、直辖市</option>
<option value="上海市">上海市</option>
<option value="河南省">河南省</option>
<option value="安徽省">安徽省</option>
<select>
</th>
<th>
<select>
<option value="市">市</option>
<option value="上海">上海</option>
<option value="焦作">焦作</option>
<option value="巢湖">巢湖</option>
<select>
</th>
<th>
<select>
<option value="区、县">区、县</option>
<option value="黄埔">黄埔</option>
<option value="普陀">普陀</option>
<option value="浦东新区">浦东新区</option>
<select>
</th>
</tr>
</table>
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="address">详细地址：</label>
</span>
<input type="text" name="address" class="text-align" style="border-radius:10px;border-color:green;" placeholder="*必填项" size="25" title="详细地址">
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="number">手机号码：</label>
</span>
<input type="text" name="telephone" class="text-align" style="border-radius:10px;border-color:green;" placeholder="*必填项" size="25" title="手机号码">
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="pay">支付宝号：</label>
</span>
<input type="text" name="paymoney" class="text-align" style="border-radius:10px;border-color:green;" placeholder="*必填项" size="25" title="支付宝号">
</div>
<div class="kv-item">
<span class="kv-label">
<label class="tsl" for="beizhu">备 注：</label>
</span>
<input type="text" name="beizhu" class="text-align" style="border-radius:10px;border-color:green;" placeholder="*选填" size="100" title="备注">
</div>
<div class="kv-item">
<input type="submit" name="submit" id="submit" style="border-radius:10px;border-color:green;"onclick="tishi()" value="提交订单" >
<input type="reset" name="reset" id="reset" style="border-radius:10px;border-color:green;" value="重置订单"></div>
</form>
</div>
<div>
<center> <img src="http://www.helloworld08.applinzi.com/dogFood/images/1464875474241.jpg" title="pay" style="width:15%"></center>
</div>
<span style="font-family:arial; color:black;"><center>Copyright ©2016 版权所有 洋火(烟台大学) </center></span>
</body>
</html>
