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 ...
随机推荐
- HBase – 存储文件HFile结构解析
本文由 网易云发布. 作者:范欣欣 本篇文章仅限内部分享,如需转载,请联系网易获取授权. HFile是HBase存储数据的文件组织形式,参考BigTable的SSTable和Hadoop的TFile ...
- 【OCP题库】最新CUUG OCP 12c 071考试题库(68题)
68.(29-13)choose two: Which two statements are true? (Choose two.) A) DICTIONARY is a view that cont ...
- “全栈2019”Java第二章:安装JDK11(Windows)
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 文章原文链接 "全栈2019"Java第二章:安装JDK11(Windows) 下一 ...
- [iOS笔试600题]一、语法篇(共有147题)
[A]1. @property 的作用是申明属性及真特性?[判断题] A.正确 B.错误 [A]2. @synthesize的作用是自动笠成属性的访问器(getter/setter)方法?[判断题] ...
- Linux(Ubuntu)配置问题集
Cannot set LC_CTYPE to default locale: No such file or directory 安装Ubuntu Server版本(不带桌面环境)时,如果安装时的语言 ...
- [转] 红帽7搭建Zabbix监控
zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...
- SQL 中用户建立与权限授予
SQL 中用户建立与权限授予 一.原有 如果大家对我的博客动态非常关注的话,应该又看到我弄了一个随机MAN信息的小工具.但是呢,那个工具还有待加强(显示效果不是那么的好). 所以我就希望可以显示一些简 ...
- HTML01--基础概述
HTML:Hyper Text Markup Language,超文本标记语言,不是编程语言,而是标记语言,使用一套标记标签来描述网页.通常来说,我们平时打开浏览器看到的网页由三部分组成,分别是HTM ...
- springboot与swagger2的集成
springboot与swagger2的集成 1.出现的背景 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染变成了:前端渲染.先后端分离的形态,而前端和后端的唯一联系,变成了API接口: ...
- 【SpringBoot+Mybatis+thymeleaf报错】Error resolving template "XXX", template might not exist or might not be accessible by any of the configured
解决方法一: 原因:在使用springboot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,必须有结束标签,否则会报错. 在application.y ...