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 ...
随机推荐
- python tricks 01
01: 考察range/sort/lambda 对以下数据进行排序 原数据: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5] 目标数据: [0, -1, 1, -2, 2 ...
- python基础——散列类型
集合 集合具有不重复性,无序性的可变对象. 集合定义 直接定义 如:a = {'a','b',2} 别的类型转换,利用set a = set(b) 其中b可以是一个列表或字符串等 增 add ...
- CentOS下MySQL忘记root密码解决方法【亲测】
1．修改MySQL的登录设置: # vim /etc/my.cnf 在[mysqld]的段中加上一句:skip-grant-tables 例如: [mysqld] datadir=/var/lib/m ...
- element ui 自定义异步验证
之前提到过,axios是一个异步请求,但是很多时候我们都需要同步请求,比如在element的表单验证中需要验证一个用户名是否存在的时候,异步请求好像就不太好用了.前边博客中提到过,这种情况可以用es6 ...
- android简洁饼状图组件、圆形Menu菜单、画板画笔应用、答题应用等源码
Android精选源码 android自动监听复制内容源码 Android上简洁轻量级的饼图控件 好看的 Android 圆形 Menu 菜单效果 android画笔.画板功能效果的实现 Androi ...
- JAVA循环结构学校上机经常遇到的几题 笔记
package homework.class4; import java.util.*; import java.util.stream.Collectors; import java.util.st ...
- yaml文件的格式
后缀为.yml 格式一般就是key:空格 value 这里的value可以是 普通数据(数字,字符串) ---------------------------------------- ...
- 103）PHP，递归读取目录内容
知识点总结: 打开某个目录 依次读取目录内文件 如果某个文件为目录 递归对该目录采用打开,读取,若还是目录,继续判断,读取 递归点: 如果子文件为目录,则递归 出口: 如果目录中不存在子目录,则不需要 ...
- discussion|局限性|解释|猜测|前作与同行
讨论是整篇论文的精华和灵魂,考查作者的文献积累量和对所研究内容的理解深度,作者需要阐述为什么结果是重要的,内容包括理论.应用.在其他其他领域的作用及应用,阐述时要求直接明确. 具体而言,首先概述最重要 ...
- OSI体系结构（七层）
OSI体系结构,意为开放式系统互联.国际标准组织(国际标准化组织)制定了OSI模型.这个模型把网络通信的工作分为7层,分别是物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 1至4层被认为 ...