JavaScript函数的使用以及下拉框、文本框、radio值的获取,结合一个淘宝竞价案例。。。
淘宝竞价案例:
JavaScript代码:
<script type="text/javascript">function Pay(){var Price=2000;var AddPrice = document.getElementById("AddPrice").value;if(AddPrice==""){document.getElementById("span2").innerHTML='<font color="red">亲,请输入加的价格哦</font>'; }var num = document.getElementById("num").value;if(num==""){document.getElementById("span3").innerHTML='<font color="red">亲,请输入您要拍的数量哦</font>';}var sex = sex1.checked ? '男' : '女';var totalMoney;var Pay1 = document.getElementById("Pay1");var index = Pay1.selectedIndex;switch(index) {case 0:document.getElementById("span1").innerHTML='<font color="red">微信支付打九折</font>'; totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;break;case 1:document.getElementById("span1").innerHTML='<font color="red">支付宝支付打八折</font>';totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.8;break;case 2:document.getElementById("span1").innerHTML='<font color="red">银联支付打七折</font>';totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.7;break;case 3:document.getElementById("span1").innerHTML='<font color="red">QQ支付打九折</font>';totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;break;case 4:document.getElementById("span1").innerHTML='<font color="red">刷卡支付不打折</font>';totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num);break;default:document.getElementById("span1").innerHTML='<font color="red" >亲,支付方式可以进行选择的呦</font>';}if(totalMoney==undefined){document.getElementById("span5").innerHTML='<font color=red>总价无法计算呦</font>';}else{document.getElementById("TotalPrice").value=totalMoney;}}</script>
HTML部分代码:
<body><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></body>
结果运行图:
JavaScript函数的使用以及下拉框、文本框、radio值的获取,结合一个淘宝竞价案例。。。相关推荐
- JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。...
淘宝竞拍案例: HTML部分代码: <form action="#" method="post"><h2>欢迎进入淘宝竞拍</h2 ...
- JavaScript函数的使用以及下拉框、radio、input类型各种标签值的获取,结合淘宝竞拍案例。。
淘宝竞拍案例: JavaScript部分代码: <script type="text/javascript">function Pay(){var Price=2000 ...
- html设置下拉菜单文本框隐藏,下拉选择框onchange触发隐藏输入框
下拉选择框onchange触发隐藏输入框 window.οnlοad=function(){ var sel=document.getElementById("sel"); if ...
- java文本框背景_用Java编写小程序(包含组合框下拉和文本框)变换背景颜色
展开全部 代码如下:import java.awt.Color; import java.awt.Dimension; import java.awt.FlowLayout; import java. ...
- 搜索引擎下拉菜单 提示关键词 接口API (百度长尾词 淘宝长尾词)
百度(baidu) Api地址 Python http://suggestion.baidu.com/su?wd=%E8%AE%BE%E8%AE%A1&p=3&cb=window.bd ...
- Javascript 调用XML制作连动下拉框
Javascript 调用XML制作连动下拉框 作者: 何耀 Thursday, June 5 2003 2:44 PM 传统的HTML页面中连动下拉框采用了两种方法: 1)直接将下拉框中的内容har ...
- flask-wtf优雅实现下拉多选框
flask-wtf实现下拉多选框 一般实现 一般情况下,我们用flask-wtf来实现下拉多选框的时候,大概是这样子操作的 定义Form类 forms.py from flask_wtf import ...
- excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
在Excel表中,如何将增加下拉菜单的选项? excel中的下拉菜单选项,就是筛选的功能,具体操作如下: 1.首先选中a.b两列数据,在"开始"选项卡上选择"筛选&quo ...
- 在 jquery repeater 中添加设置日期,下拉,复选框等控件
JQueryElement 更新到了 3.5.1, 今天给大家主要讲下如何在 Repeater 的模板中添加设置一些控件. 由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, ...
最新文章
- 转载,大佬关于虚拟内存与物理内存关系讲解。
- Oracle调优综述
- SQL Server Management Studio 过期无法使用解决办法
- 正弦水波纹波动画 - SJWaveView
- python使用opencv会蓝屏_Opencv和DirectShow一起做蓝屏抠像
- MVC中 数据底层联合JQUERY实现动态的安全的验证机制
- 1113 Integer Set Partition(25 分)
- Springboot项目中Pom.xml报错
- 记录一下这几天写专利的日子
- 远程屏幕共享软件哪个比较好用
- php后门 佛像,给千年佛像做了个CT,结果好吓人
- 数学分析(1): 实数
- 一款超级好用的虚拟示波器软件
- NB-loT中的Niubility技术
- 马宁伟-20年工作经验谈-4-男怕入错行
- jQuery判断是否为数字
- 楼层标高怎么引上去_楼层标高怎么引上去
- 虚拟商品帐号交易平台源码_支持个人二维码收款
- 【科研绘图封面教程】C4D+PS教学绘制优秀期刊封面第一期
- Android暗黑模式适配