JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。...
- 淘宝竞拍案例:
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、下拉框的值的获取,结合淘宝竞拍案例来理解。。。...相关推荐
- JavaScript函数的使用以及下拉框、radio、input类型各种标签值的获取,结合淘宝竞拍案例。。
淘宝竞拍案例: JavaScript部分代码: <script type="text/javascript">function Pay(){var Price=2000 ...
- 如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们?雪原虎 发布于:2007-10-22 00:32
如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们? 雪原虎 发布于:2007-10-22 00:32 1.文本框 1.1 <input type="text ...
- form表单注意点合集(文本域、单选框、复选框、下拉框等)
.html <form action="#" target="_blank">账号:<input type="text" ...
- uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)
如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样. 解决措施: 在小程序中canvas层级过高,导致z-index也无法让弹窗置 ...
- JavaFX --- 标签、文本框、密码框、下拉框、按钮、单选按钮、复选框
目录 JavaFX的基本结构和概念 Application --- 代表了JavaFX的应用程序 Stage --- 舞台 --- 代表了一个窗体. 在Application的start方法中,提供了 ...
- QTableView 表格中插入图片、勾选框、下拉框
QTableView 表格中插入图片.勾选框.下拉框 效果图 QT的Delegate,可以实现TableView中每一个单元格的显示形式.本例利用Delegate的paint函数绘制出图片.勾选框.下 ...
- 单选按钮、复选框、下拉框的回显
单选按钮.复选框.下拉框的回显 1.单选按钮radio的回显 2.复选框checkbox的回显 3.下拉框select的option回显 在前端页面中,经常需要根据需要来进行信息的回显,如果是普通的文 ...
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- [css] css怎么更改表单的单选框或下拉框的默认样式?
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
最新文章
- SQL Server 数据库崩溃后的恢复之法
- View工作原理(二)导致View重建原因
- 在MATLAB function中可变的变量数据类型
- 2 创建联合索引_想进大厂,这些Mysql索引底层知识你是必须知道的
- 同步本地远程分支 git remote prune origin
- Java获取硬盘信息
- 使用嵌套循环,打印四行五列星星矩形(每次只能打印一个*)
- 分享10款常用的jQuery焦点图插件
- js上传文件并预览文件内容
- 文本编辑控件FreeTextBoxFCKeditor下载地址
- 物联网设备通过MQTT接入华为iot平台
- 接口测试简介以及接口测试用例设计思路
- java实现并查集算法
- excel取消隐藏_excel批量取消工作表隐藏,困绕我们N年的问题终于有了答案!
- java word 分页显示_java使用freemaker 导出word 包含分页,表格循环,word改xml格式化...
- easyui datagrid deleteRow(删除行)的BUG!
- mybatis/mybatis-plus 子查询实现 涉及到in、exist操作
- DNSPod十问陈迪菲:从C到B,鹅厂设计师的中场战事
- 深度学习+符号表征=强大的多任务通用表征,DeepMind新论文可能开启AI新时代
- Python队列Queue
热门文章
- 洛谷 P1569 [USACO11FEB]属牛的抗议Generic Cow Prote…
- 前端基础之Html、CSS、JavaScript、JQuery、Ajax
- CAPS发布了完全支持OpenACC的编译器了!
- java用数组输出fibo_[Java教程]养兔子Fibo函数优化
- java socket通信 客户端_JavaのSocket编程之简单客户端与服务器端通信
- php股票t+0,股票t文档教材+0操作宝典.pdf
- 【操作系统】进程调度(3):RR(轮转) 算法 原理与实践
- 从航天到原始递归函数的四个定理及其证明——哥德尔读后之十二
- python判断谁是小偷_警察抓了A、B、C、D四名偷窃嫌疑犯,但其中只有一人是真正的小偷。审问记录如下:...
- 在几何画板中如何制作圆柱的侧面展开动画_几何画板如何制作圆柱体形成的过程动画...