*/

 * 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 &copy;2016 版权所有 洋火(烟台大学) </center></span>

</body>

</html>

JS实现总价随数量变化而变化（顾客购买商品表单）的更多相关文章

  1. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  2. [js开源组件开发]query组件,获取url参数和form表单json格式

    query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...

  3. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  4. 在客户端先通过JS验证后再将表单提交到服务器

    问题:想要在客户端先通过JS验证后再将表单提交到服务器 参考资料: jQuery 事件 - submit() 方法 试验过程: 服务器端使用PHP <html> <head> ...

  5. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  6. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  7. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  8. CSS 布局实例系列（四）如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？

    Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...

  9. CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？

    实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-contain ...

随机推荐

  1. 14 微服务电商【黑马乐优商城】：day06-使用nginx反向代理并掌握cors解决跨域

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  2. BTree非递归

    preorder void PreOrder(BTNode* b) { BTNode* p = b; SqStack* st; InitStack(st); if (b != NULL) { Push ...

  3. 结构体初始化和new delete

    int *p; p=new int[100]; delete []p; 结构体中的指针需要初始化

  4. $identify 的 “identify” 表示一个Perl标识符，即 identifier

    $identify 的 “identify” 表示一个Perl标识符,即 identifier

  5. 3）PHP的http 并发

    详解浏览器最大并发连接数:http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/ 并发连接数对浏览器加载速度的测试:http://www.ief ...

  6. Docker系列五: docker-compose部署Docker容器

    Docker使用Dockerfile来实现对现有镜像的修改来创建新的镜像, 那docker-compose则完成镜像的自动部署, 可以实现多个容器同时部署 Dockerfile可以让用户管理一个单独的 ...

  7. 解决一个通过 WebReference 调用 WCF 时自定义 DataContract 类参数提交的问题

    先看一下VS2013自动创建默认的IService1.vb,注意自定义的数据契约 CompositeType ' 注意: 使用上下文菜单上的“重命名”命令可以同时更改代码和配置文件中的接口名“ISer ...

  8. android应用市场、社区客户端、漫画App、TensorFlow Demo、歌词显示、动画效果等源码

    Android精选源码 MVP架构Android应用市场项目 android刻度盘控件源码 Android实现一个社区客户端 android商品详情页上拉查看详情 基于RxJava+Retrofit2 ...

  9. CPU内核、用户模式

    本文由是阅读该文章做下的笔记. CPU分内核与用户模式. 三言蔽之 内核模式下,应用可以直接存取内存,能够执行任何CPU指令.一般来说驱动运行在该模式下.内核模式的应用一旦崩溃,整个操作系统都会崩溃. ...

  10. django框架基础-路由系统-长期维护

    ##################   路由系统介绍    ####################### 路由系统就是路径和函数的对应关系, 路由系统可以看成支撑你这个网站的目录,就像是一本书一样 ...