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" onclick="Pay()" />
</form>
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>
运行结果图:



JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。的更多相关文章
- 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Jquery学习笔记:操作form表单元素之一(文本框和下拉框)
一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...
- robotframework文本类型的下拉框
对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...
- robotframework自动化系列:文本类型的下拉框
对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...
- html之多行文本textarea 及下拉框select(12)
1.多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno)) <body> < ...
- [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框
本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...
- html基本标签表单实现交互原理,单选框,复选框,下拉框介绍
表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
随机推荐
- golang plugin的依赖问题
golang plugin的依赖问题 此文中涉及的plugin运行环境为mac 10.14,go版本为1.11 主要是想讨论一下插件依赖的第三方库的问题. 例子是在https://github.com ...
- fd - 更好的 find 命令
欢迎关注我的公众号 spider-learn fd(https://github.com/sharkdp/fd) 是 find 命令的一个更现代的替换. 对比一下 查找名字含有某个字符的文件 OLD ...
- sql语句中group by使用
group by分组函数,group by name 将查询结果按照name进行分组,相同name的记录一组,配合聚合函数,显示每个name的情况. 1,数据源 表A结构如下: CREATE TA ...
- 基于Dubbo的Hessian协议实现远程调用
Dubbo基于Hessian实现了自己Hessian协议,可以直接通过配置的Dubbo内置的其他协议,在服务消费方进行远程调用,也就是说,服务调用方需要使用Java语言来基于Dubbo调用提供方服务, ...
- Dota2APP--第二天
一.今天的任务 1)自定义标签栏控制器 2)自定义导航栏控制器 3)在新特性界面播放音频 1.第一个任务:自定义标签栏控制器 原因:默认的TabbarViewController不能满足项目的需求. ...
- sqlplus登录远程数据库与数据导出
一.登录 1.cmd中输入sqlplus /nolog 2.链接数据库,root是用户名,root123是密码,ORCL是数据库名.conn root/root123@192.168.1.27:152 ...
- eNSP 模拟器添加loopback本地回环口
eNSP只能模拟华为的设备,通常情况下数据通信的传递范围仅限于eNSP中的设备之间. 有时我们在学习更多技术,比如希望将eNSP跟VMware Workstation里的虚拟机互通,或者想让eNSP里 ...
- CODEVS-1018单词接龙
单词接龙 原题:传送门 解题思路: 此题是典型的深搜题目,首先确定递归变量,表示字母的数量,每当满足一定条件,就往下一层递归,否则回溯 判断由哪个单词开始(因为可能字母首位可能相同),再确定之后所连单 ...
- Xamarin Mono For Android 4.6.07004看不到新建android
有很多朋友安装了Xamarin Mono For Android 4.6.07004看不到新建android项目 PS 官方安装包有BUG,在某些情况下可能会出现丢失VS插件的情况 (遇到此BUG请下 ...
- winform FormBordStyle=none 及 wpf FormBordStyle=none 的鼠标点击移动问题
winform: //bool formMove = false;//窗体是否移动 //Point formPoint;//记录窗体的位置 private void Login_MouseDown(o ...