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 ...
随机推荐
- systemd[1]: mariadb.service: Can't open PID file /data/mariadb/mysql/30-mariadb-1.pid (yet?) after start: No such file or directory
环境:Centos8 编译安装Mariadb-10.4.11,安装到make install都没有问题,添加服务启动脚本到/lib/systemd/system/,服务启动脚本名为mariadb.se ...
- 吴裕雄--天生自然TensorFlow高层封装：解决ImportError: cannot import name 'tf_utils'
将原来版本的keras卸载了,再安装2.1.5版本的keras就可以了.
- 理解Java中的对象，变量和方法
1.对象的创建和销毁 1.1 对象的创建 这里只介绍创建对象与构造方法的关系 (1).每实例化一个对象就会自动调用一次构造方法,实质上这个过程就是创建对象的过程,准确的说,在Java语言中使用new操 ...
- linux 信号量sem实现 生产者—消费者(线程间通信)
#include<pthread.h> #include<stdlib.h> #include<stdio.h> #include<unistd.h> ...
- NAIPC2018
NAIPC2018 参考:http://www.cnblogs.com/LQLlulu/p/9513669.html?tdsourcetag=s_pctim_aiomsg https://www.cn ...
- 我的 xelatex 模板
\documentclass[twoside,11pt]{article} \usepackage{amsmath,amsfonts} \usepackage{hyperref} \usepackag ...
- Scapy-ARPspoof学习
layout title tag date post Scapy模块学习之ARP欺骗 Python 2018-05-08 from scapy.all import Ether,ARP,sendp,g ...
- iOS分段选择器、旅行App、标度尺、对对碰小游戏、自定义相册等源码
iOS精选源码 企业级开源项目,模仿艺龙旅行App 标签选择器--LeeTagView CSSegmentedControl常用的分段选择器,简单易用! 仿微信左滑删除 IOS左滑返回 输入框 iOS ...
- [LC] 796. Rotate String
We are given two strings, A and B. A shift on A consists of taking string A and moving the leftmost ...
- BGP联盟
---恢复内容开始--- 1. 每台路由器设置loop back口,r1和r6另外多设置两个 2. R2 R3 R4 R5 R6做ospf 以R2为例: ospf 1 router-id 2.2.2. ...