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 ...
随机推荐
- H - Mr. Panda and Birthday Song Gym - 101775H (动态规划)
Mrs. Panda’s birthday is coming. Mr. Panda wants to compose a song as gift for her birthday. It is k ...
- nginx 配合jersey+netty的奇怪问题
角色 client proxy nginx server jersey+netty 问题表现 client 直接请求server 正常,返回准确json数据 jsondat client->ng ...
- Java面试宝典2017
JAVA面试.笔试题(2017版) 欲想成功,必须用功! 目录 一. HTML&CSS部分................ ...
- CCP 协议
转载 1. CCP协议概述 CCP(CAN Calibration Protocol)是一种基于CAN总线的匹配标定协议.ECU都需要经过匹配标定的过程,从而确定其运行参数和控制参数.有时为了实现对 ...
- VBA引用管理工具（可用于32、64位Office，Win7 Win10均可）
VBAReferenceManager安装和使用方法,操作请看动态图: 下载地址: VBAReferenceManager.zip
- 磁盘处于脱机状态"解决办法
由于管理员设置的策略,该磁盘处于脱机状态"解决办法 1.运行:cmd 2.输入:DISKPART.exe 3.DISKPART> san 4.DISKPART> san poli ...
- 区别 new function(){} 和 function(){}()
只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实 ...
- Ubuntu 12.04 查看DOCSIS配置文件
查看BIN格式的DOCSIS配置文件,需要专用工具. 工具安装 在Windows下,可以使用工具VultureWare DOCSIS Config Editor. 在Ubuntu(本机版本12.04) ...
- 吴裕雄 python 神经网络——TensorFlow 卷积神经网络水果图片识别
#-*- coding:utf- -*- import time import keras import skimage import numpy as np import tensorflow as ...
- 对TD tree的使用体验及建议
TDtree与QQ空间有着相似的功能,你可以在里面发表自己的感受与心情,也可以存储照片或者给喜欢的说说点赞.发表评论等,可以说这是一个将QQ空间从QQ里独立出来的软件.作为一个娱乐性的软件,它的功能还 ...