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 ...
随机推荐
- Enabling Remote Errors in SSRS
January 18, 2011 By default the remote errors property in SQL Server Reporting Services is set to fa ...
- ADV三星
#include <iostream> using namespace std; #define SIZE 12 int data[SIZE]; int data1[SIZE]; int ...
- PHP创建与解析 XML 1 (36)
一.使用SimpleXML操控XML 要处理XML 文件,有两种传统的处理思路:SAX 和DOM.SAX 基于事件触发机制,对XML 文件进行一次扫描,完成要进行的处理:DOM 则将整个XML 文件构 ...
- 474. Ones and Zeroes
In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...
- 如何获取token值
登录的时候需要拿到token值,需要跟后端配合才能拿到 官方说明: https://developers.weixin.qq.com/miniprogram/dev/api/api-login.htm ...
- 3XX重定向
3XX响应结果表明浏览器需要执行某些特殊的处理以正确处理请求 301 Moved Permanently 永久性重定向 该状态码表示请求的资源已经被分配了新的URI,以后应使用资源现 ...
- 使用X-Pack插件来进行权限控制
1.为elasticsearch安装X-Pack插件.进入 elasticsearch根目录,执行: bin/elasticsearch-plugin install x-pack杀掉进程,重启es, ...
- 继承Runnable 实现Synchronized 同步锁
在java编程中,经常需要用到同步,而用得最多的也许是synchronized关键字了,下面看看这个关键字的用法. 因为synchronized关键字涉及到锁的概念,所以先来了解一些相关的锁知识. j ...
- 这是一次 docker 入门实践
前言 其实接触 docker 也有一段时间了,但是一直没有做下总结,现在网上关于 docker 的介绍也有很多了,本着好记性不如烂笔头的原则,还是自己再记录一波吧. 实现目标 安装 docker ce ...
- Maven 依赖管理问题小计
刚学Maven,遇到点小问题,记录一下.https://maven.apache.org/ 问题的起因是项目中使用了 Hibernate Validator ,但是运行起来后总是不能按照设置的注解校验 ...