1. 淘宝竞拍案例:

HTML部分代码:

<form action="#" method="post"><h2>欢迎进入淘宝竞拍</h2><h3>本次拍卖品为:导盲犬</h3> 底价:<input type="text" id="Price" value="2000" /><br/><br/>加价:<input type="text" id="AddPrice" /><br/><span id="span2"></span><br/> 数量:<input type="text" id="num" /><br/><span id="span3"></span><br/> 性别:<input type="radio" id="sex1" name="sex"  checked="checked"/>男<input type="radio" id="sex2" name="sex" />女<br/><br/> 付款方式:<select id="Pay1"><option>微信支付</option><option>支付宝支付</option><option>银联支付</option><option>QQ支付</option><option>刷卡支付</option></select><br/><span id="span1" ></span><br/> 总价:<input type="text" id="TotalPrice" /><br/><span id="span5" ></span><br/><input type="button" value="确认" name="dj" οnclick="Pay()" /></form>

  JavaScript部分代码:

 1     <script type="text/javascript">
 2             function Pay(){
 3                 var Price=2000;
 4                 var AddPrice = document.getElementById("AddPrice").value;
 5                 if(AddPrice=="")
 6                 {
 7                     document.getElementById("span2").innerHTML='<font color="red">亲,请输入加的价格哦</font>';
 8                 }
 9                 var num = document.getElementById("num").value;
10                 if(num=="")
11                 {
12                     document.getElementById("span3").innerHTML='<font color="red">亲,请输入您要拍的数量哦</font>';
13                 }
14                 var sex = sex1.checked ? '男' : '女';
15                  var totalMoney;
16                 var Pay1 = document.getElementById("Pay1");
17                 var index = Pay1.selectedIndex;
18                 switch(index) {
19                     case 0:
20                         document.getElementById("span1").innerHTML='<font color="red">微信支付打九折</font>';
21                         totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;
22                         break;
23                     case 1:
24                         document.getElementById("span1").innerHTML='<font color="red">支付宝支付打八折</font>';
25                         totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.8;
26                         break;
27                     case 2:
28                         document.getElementById("span1").innerHTML='<font color="red">银联支付打七折</font>';
29                         totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.7;
30                         break;
31                     case 3:
32                         document.getElementById("span1").innerHTML='<font color="red">QQ支付打九折</font>';
33                         totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;
34                         break;
35                     case 4:
36                         document.getElementById("span1").innerHTML='<font color="red">刷卡支付不打折</font>';
37                         totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num);
38                         break;
39                         default:document.getElementById("span1").innerHTML='<font color="red" >亲,支付方式可以进行选择的呦</font>';
40                 }
41               if(totalMoney==undefined)
42               {
43                   document.getElementById("span5").innerHTML='<font color=red>总价无法计算呦</font>';
44               }else
45               {
46                   document.getElementById("TotalPrice").value=totalMoney;
47               }
48
49             }
50
51         </script>

运行结果图:

转载于:https://www.cnblogs.com/wjrelax/p/8921200.html

JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。...相关推荐

  1. JavaScript函数的使用以及下拉框、radio、input类型各种标签值的获取,结合淘宝竞拍案例。。

    淘宝竞拍案例: JavaScript部分代码: <script type="text/javascript">function Pay(){var Price=2000 ...

  2. 如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们?雪原虎 发布于:2007-10-22 00:32

    如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们? 雪原虎 发布于:2007-10-22 00:32 1.文本框 1.1 <input type="text ...

  3. form表单注意点合集(文本域、单选框、复选框、下拉框等)

    .html <form action="#" target="_blank">账号:<input type="text" ...

  4. uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)

    如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样. 解决措施: 在小程序中canvas层级过高,导致z-index也无法让弹窗置 ...

  5. JavaFX --- 标签、文本框、密码框、下拉框、按钮、单选按钮、复选框

    目录 JavaFX的基本结构和概念 Application --- 代表了JavaFX的应用程序 Stage --- 舞台 --- 代表了一个窗体. 在Application的start方法中,提供了 ...

  6. QTableView 表格中插入图片、勾选框、下拉框

    QTableView 表格中插入图片.勾选框.下拉框 效果图 QT的Delegate,可以实现TableView中每一个单元格的显示形式.本例利用Delegate的paint函数绘制出图片.勾选框.下 ...

  7. 单选按钮、复选框、下拉框的回显

    单选按钮.复选框.下拉框的回显 1.单选按钮radio的回显 2.复选框checkbox的回显 3.下拉框select的option回显 在前端页面中,经常需要根据需要来进行信息的回显,如果是普通的文 ...

  8. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  9. [css] css怎么更改表单的单选框或下拉框的默认样式?

    [css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...

最新文章

  1. SQL Server 数据库崩溃后的恢复之法
  2. View工作原理(二)导致View重建原因
  3. 在MATLAB function中可变的变量数据类型
  4. 2 创建联合索引_想进大厂,这些Mysql索引底层知识你是必须知道的
  5. 同步本地远程分支 git remote prune origin
  6. Java获取硬盘信息
  7. 使用嵌套循环,打印四行五列星星矩形(每次只能打印一个*)
  8. 分享10款常用的jQuery焦点图插件
  9. js上传文件并预览文件内容
  10. 文本编辑控件FreeTextBoxFCKeditor下载地址
  11. 物联网设备通过MQTT接入华为iot平台
  12. 接口测试简介以及接口测试用例设计思路
  13. java实现并查集算法
  14. excel取消隐藏_excel批量取消工作表隐藏,困绕我们N年的问题终于有了答案!
  15. java word 分页显示_java使用freemaker 导出word 包含分页,表格循环,word改xml格式化...
  16. easyui datagrid deleteRow(删除行)的BUG!
  17. mybatis/mybatis-plus 子查询实现 涉及到in、exist操作
  18. DNSPod十问陈迪菲:从C到B,鹅厂设计师的中场战事
  19. 深度学习+符号表征=强大的多任务通用表征,DeepMind新论文可能开启AI新时代
  20. Python队列Queue

热门文章

  1. 洛谷 P1569 [USACO11FEB]属牛的抗议Generic Cow Prote…
  2. 前端基础之Html、CSS、JavaScript、JQuery、Ajax
  3. CAPS发布了完全支持OpenACC的编译器了!
  4. java用数组输出fibo_[Java教程]养兔子Fibo函数优化
  5. java socket通信 客户端_JavaのSocket编程之简单客户端与服务器端通信
  6. php股票t+0,股票t文档教材+0操作宝典.pdf
  7. 【操作系统】进程调度(3):RR(轮转) 算法 原理与实践
  8. 从航天到原始递归函数的四个定理及其证明——哥德尔读后之十二
  9. python判断谁是小偷_警察抓了A、B、C、D四名偷窃嫌疑犯,但其中只有一人是真正的小偷。审问记录如下:...
  10. 在几何画板中如何制作圆柱的侧面展开动画_几何画板如何制作圆柱体形成的过程动画...