环境 和开发工具:myEclipse10、Tomcat7.0、JDK1.8
用表单输入10本书的价格,然后显示这10本书中最高价格,最低价格和平均价格。
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<script type="text/javascript">
function fun(){
var sum=0;var max=0;var min=1000000000;
var x=document.getElementsByName("b");
var tmp=0.0;
for(var i=0;i<x.length;i++){
if(x[i].value==""){
tmp=0.0;
alert("请输入全部10本书的价格!");
sum=0.0;
min=0.0;
max=0.0;
break;
}
else{
tmp=parseFloat(x[i].value);
}
sum=sum+tmp;
if(max<tmp){max=tmp;}
if(min>tmp){min=tmp;}
}
document.getElementById("max").value=max;
document.getElementById("min").value=min;
document.getElementById("sum").value=sum;
return;
}
</script>
<p>请输入10本书的价格</p>
<form name="bookprice">
book01<input name="b" type="text"><BR>
book02<input name="b" type="text"><BR>
book03<input name="b" type="text"><BR>
book04<input name="b" type="text"><BR>
book05<input name="b" type="text"><BR>
book06<input name="b" type="text"><BR>
book07<input name="b" type="text"><BR>
book08<input name="b" type="text"><BR>
book09<input name="b" type="text"><BR>
book10<input name="b" type="text"><BR>
<input type="button" onclick="fun()" value="提交"><BR>
最高价格<input id="max" type="text" readonly><BR>
最低价格<input id="min" type="text" readonly><BR>
价格总和<input id="sum" type="text" readonly><BR>
</form>
</body>
</html>
这是一般的写法,可以看到程序中写了10个表单input输入框来给用户输入书的价格,这样写是很繁琐的,可以用jsp程序段<%%>来简化代码,如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<script type="text/javascript">
function fun(){
var sum=0;var max=0;var min=1000000000;
var x=document.getElementsByName("b");
var tmp=0.0;
for(var i=0;i<x.length;i++){
if(x[i].value==""){
tmp=0.0;
alert("请输入全部10本书的价格!");
sum=0.0;
min=0.0;
max=0.0;
break;
}
else{
tmp=parseFloat(x[i].value);
}
sum=sum+tmp;
if(max<tmp){max=tmp;}
if(min>tmp){min=tmp;}
}
document.getElementById("max").value=max;
document.getElementById("min").value=min;
document.getElementById("sum").value=sum;
return;
}
</script>
<p>请输入10本书的价格</p>
<form name="bookprice">
<%
for(int i=1;i<=10;i++){
%>book<%= i%><input name="b" type="text"><BR><%
}
%>
<input type="button" onclick="fun()" value="提交"><BR>
最高价格<input id="max" type="text" readonly><BR>
最低价格<input id="min" type="text" readonly><BR>
价格总和<input id="sum" type="text" readonly><BR>
</form>
</body>
</html>
总结:
1.js获取表单值
var x=document.getElementsByName("name");
这个语句获取名为“name”的对象,当名为“name”的元素只有一个时,x为单个值;当有多个同名元素时,x为数组,此时用x[i]来依次获取元素。
2.js设置表单值
document.getElementById("max").value=max;
本题将名为”max”的input文本框值设为变量max
3.将input输入框设置为不可编辑形式
此处用“readonly”,还有另一个“disabled”,也可以达到这个目的,这两者的区别在于使用disabled后,用户无法编辑输入框,并且无法在js或者jsp程序段中获取input输入框中的值,即将元素锁定;而readonly只会使得用户不能编辑输入框,在js中仍能通过document对象访问获取值。
最高价格<input id="max" type="text" readonly ><BR>
这两者具体的区别见:
http://www.nowamagic.net/html/html_ReadonlyAndDisabled.php