JS实现总价随数量变化而变化（顾客购买商品表单）
*/
* 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>
JS实现总价随数量变化而变化（顾客购买商品表单）的更多相关文章
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- [js开源组件开发]query组件,获取url参数和form表单json格式
query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- 在客户端先通过JS验证后再将表单提交到服务器
问题:想要在客户端先通过JS验证后再将表单提交到服务器 参考资料: jQuery 事件 - submit() 方法 试验过程: 服务器端使用PHP <html> <head> ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- CSS 布局实例系列（四）如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
- CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？
实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-contain ...
随机推荐
- [HNOI2019]序列（单调栈+二分）
通过打表证明发现答案就是把序列划分成若干段,每段的b都是这一段a的平均数.50分做法比较显然,就是单调栈维护,每次将新元素当成一个区间插入末尾,若b值不满足单调不降,则将这个区间与单调栈前一个区间合并 ...
- Mysql_常规操作
001.数据库 全局操作 # 连接数据库: # mysql -h主机地址 -u用户名 -p(登陆用户密码) # 修改用户密码 mysqladmin # mysqladmin -u root ...
- springboot集成websocket实现大文件分块上传
遇到一个上传文件的问题,老大说使用http太慢了,因为http包含大量的请求头,刚好项目本身又集成了websocket,想着就用websocket来做文件上传. 相关技术 springboot web ...
- 如何用java实现图片与base64转换
如果你是一个软件开发,不论前端后端工程师,图片的处理你是肯定要会的,关于图片的Base64编码,你可能有点陌生,但是这是一个软件工程师应该要掌握的知识点,现在很多网友把图片与base64转换都做成了小 ...
- S5P4418开发板android源码下uboot和内核缺省文件的配置
uboot 需要配置缺省文件,进入解压的源码目录 android,然后进入 u-boot 目录,如下图所示.如上图所示,如果是 1G 核心板,则使用“cp nsih-1G16b-4418.txt ns ...
- scala slick mysql utf8mb4 支持
语言 scala sql包 slick 3.2.0 数据库 mysql https://stackoverflow.com/questions/36741141/scala-slick-jdbc ...
- 2.Redis数据类型
Redis中存储数据是通过key-value存储的,对于value的类型有以下几种: 字符串 Hash类型 List Set SortedSet(zset) 注:在redis中的命令语句中,命令是忽略 ...
- 安装python第三方包
20190822 先说一下,有4种方法(我知道的): 1.源码安装 2.python自带包管理器安装 3.外部包管理器安装 4.whl格式安装 1.源码安装 Python第三方库几乎都可以在githu ...
- python多进程之IPC机制以及生产者消费者模型
1.进程间通信(IPC机制) 第一种:管道 import subprocessres=subprocess.Popen('dir',shell=True, stdout=subprocess.PIPE ...
- Fault Domain深入分析