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 ...
随机推荐
- RabbitMq初探——用队列实现RPC
rabbitmq构造rpc 前言 rpc——remote procedure call 远程调用.在我接触的使用过http协议.thrift框架来实现远程调用.其实消息队列rabbitmq也可以实现. ...
- 护网杯圆满结束,还不满足?不如来看看大佬的WP扩展思路~
护网杯预选赛 WP转载自:https://qingchenldl.github.io/2018/10/13/%E6%8A%A4%E7%BD%91%E6%9D%AFWP-BitPwn/#more WEB ...
- django入门-视图-part3
尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6511384.html 完全翻译自官方文档 https://docs.djangoproje ...
- jmeter服务器监控插件下载配置
jmeter想要监控服务器CPU.内存.磁盘.网络等相关资源需要借助plugins插件 下载jmeter性能监控插件 1.下载jmeterPlugins-Standard和jmeterPlugins- ...
- SQL查询表结构的语句
SELECT tableName=CASE WHEN a.colorder=1 THEN d.name ELSE '' END ,表说明 =CASE WHEN a.colorder=1 THEN IS ...
- MySQL数据库管理
好记性不如烂笔头 1.MySQL启动基本原理 /etc/init.d/mysqld 是一个shell启动脚本,启动后会调用mysqld_safe脚本,最后调用的是mysqld主程序启动mysql. 单 ...
- Asp.net的生命周期之应用程序生命周期
参考:http://msdn.microsoft.com/zh-cn/library/ms178473(v=vs.100).aspx 参考:http://www.cnblogs.com/JimmyZh ...
- PHP下的浮点运算不准的解决办法
首先看一段代码: 首先看一段代码: <?php $a = 0.1; $b = 0.7; var_dump(($a + $b) == 0.8); 打印出来的值居然为 boolean false P ...
- jQuery EasyUI Datagrid组件的完整的基础DOM结构
标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...
- jQuery 属性操作attr().prop().text().html().val()
这些方法用于获取和设置 DOM 元素的属性. 一.attr(): <!--样式:在style里面写的,用css来操作.--> <!--属性:在元素里面写的,用attr方法操作.--& ...