开发一个XHTML文档,其中包含了一组文本框和一个提交按钮(1) 文本框的提示内容为苹果(每斤5元)、桔子(每斤3.5元)、香蕉(每斤4元),文本框是用来接收数值输入,表示购买了几斤此类水果,都应该有自己的onclick事件处理程序,这些事件处理能够将对应的水果价格添加到总价格中。(2) 针对提交按钮的事件处理程序必须能产生一个alert窗口,给用户提示总价格。(3) 对文档中文本框添加真实性检查功能,对文本框输入的检查应该保证在0-99之间。
调试欢乐多
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">#apDiv1 {
position:absolute;
width:157px;
height:51px;
z-index:1;
left: 476px;
top: 514px;
}
#apDiv2 {
position:absolute;
width:128px;
height:73px;
z-index:2;
left: 404px;
top: 161px;
}
</style>
</head><body>
<script language="javascript" type="text/javascript">
<!--
function caculator1()
{ var total1= 0;
var x=document.getElementsByName("txt11")[0];
if(x.value<100&&x.value>0){
total1+= (x.value)*5.00;
var total= 1;
//alert('你买了'+total1+'元的苹果');
//return sum1;
//document.write("买了"+sum1+"苹果");
}
else{
alert("请输入0-99间的数字!");
}
}
function caculator2()
{
var total2= 0;
var x=document.getElementsByName("txt22")[0];
if(x.value<100&&x.value>0){
total2+= (x.value)*3.50;
//alert('你买了'+total2+'元的桔子');
}
else {sum2=0;
alert("请输入0-99间的数字!");
}
return total2;
}
function caculator3()
{ var total3=0;
var x=document.getElementsByName("txt33")[0];
if(x.value<100&&x.value>0){
//alert('你买了'+total3+'元的香蕉');
total3+= (x.value)*3.50;
}
else{
alert("请输入0-99间的数字!");
}
return total3;
}
function check ()
{
tital=0;
//var x=document.getElementsByName("txt11")[0];
//var y=document.getElementsByName("txt22")[0];
//var z=document.getElementsByName("txt33")[0];
//total=x.value+y.value+z.value;
total=caculator1();
total+=caculator2();
total+= caculator3();
if(total>0){
alert( total);
alert ("你买任何东西");
}
if(total==0){
alert ("你还未购买任何东西");
} }
-->
</script>
<h1> 欢迎来到水果店</h1>
<table width="556" border="10">
<tr>
<td width="110" height="55">水果类型</td>
<td width="105">单价(元/斤)</td>
<td width="144">购买数量(斤)</td>
<td width="151">小计(元)</td>
</tr>
<tr>
<td height="75">苹果</td>
<td>5.00</td>
<td width="144"><form id="form1" name="form1" method="post" action="">
<label for="txt1"></label>
<input name="txt11" type="text" id="txt10" size="4" maxlength="4" />
</form></td>
<td><div id="apDiv2"></div></td>
</tr>
<tr>
<td height="113">桔子</td>
<td>3.50</td>
<td><form id="form2" name="form2" method="post" action="">
<label for="txt2"></label>
<input name="txt22" type="text" id="txt2" size="4" maxlength="4" />
</form></td>
<td> </td>
</tr>
<tr>
<td height="117">香蕉</td>
<td>4.00</td>
<td><form id="form3" name="form3" method="post" action="">
<label for="txt3"></label>
<input name="txt33" type="text" id="txt3" size="4" maxlength="4" />
</form></td>
<td> </td>
</tr>
</table>
<div id="apDiv1">
<form id="form4" name="form4" method="post" action="">
<input type="submit" name="final" id="final1" value="确认结账" onclick=" check()" />
</form>
</div>
<p> </p>
<p>
</p>
</body>
</html>
我已经写了这一些了
<html>
<head>
<script>
cal = function(obj){
alert(/\b\d{1,2}\b/.test(obj.value))
};
</script>
</head><body>
<input type="text" onblur="cal(this)"/>
</body>
<html>
以上代码是在文本框离开时验证框内值是0-99的整数,应该够你参数了,原题说什么在文本框onclick时计算价格有点奇怪,如果你真的要onclick那自行替换吧。计算总价和把计算的结果添加到div内你应该都懂的,就不做了。
<html>
<head>
<script>
cal = function(obj){
document.getElementById("calResult").innerHTML = /\b\d{1,2}\b/.test(obj.value) && obj.value.length<3
};
</script>
</head><body>
<input type="text" onblur="cal(this)"/> <div id="calResult"></div>
</body>
<html>
修改了一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>水果</title>
<style type="text/css">
#a{
width:600px;
height:300px;
font-size:15px;
color:white;
position:absolute;
top:100px;
left:400px;
background-color:blue;
z-index:3;
}
</style>
<script language="javascript">
document.onreadystatechange = function(){
if(document.readyState=="complete")
{
allElements=document.getElementsByTagName("input");
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].className =="fruit") {
allElements[i].onblur=function(){
count(allElements,this);
//....如果修改数据..用ajax
}
}
} //end for
} //end if
} function count(els,th){
var ct=0;
var this_value=th.value;
if(isNaN(this_value)){ //只能数字
th.value=0;
return false;
}
if(parseFloat(this_value)>99){
th.value=99; //小于99
}
for (var i = 0; i < els.length; i++) {
ct+=parseFloat((els[i].value)*(els[i].getAttribute("rel")));
}
document.getElementById("b4").value=ct.toFixed(2);}</script>
</head>
<body background="雪花.gif">
<bgsound loop="-1" src="纯音乐-忧伤还是快乐.mp3" >
<div id="a" >
<br/>
<h3 align="center">水果商店</h3>
<br>
<p align="center">
<form name="form1">
苹果( 5元\斤 ) <input type="text" value="0" size="4" class="fruit" rel="5"></form>
<form name="form2">
桔子(3.5元\斤) <input type="text" value="0" size="4" class="fruit" rel="3.5"></form>
<form name="form3">
香蕉( 4元\斤 ) <input type="text" value="0" size="4" class="fruit" rel="4"></form><form name="form3">
日蕉( 8元\斤 ) <input type="text" value="0" size="4" class="fruit" rel="8"></form>
<form>
总价格:
<input typr="text" id="b4" disabled="disabled" value="0" size="25" /></form>
<form>
<button onclick="add(5);">清零</button>
</form>
</p>
</div>
</body>
</html>