那位牛人愿意帮帮忙??我这个作业明天交,临时学来不及了。。帮忙的万分感谢哈。。。。
开发一个XHTML文档,其中包含了一组文本框和一个提交按钮
(1) 文本框的提示内容为苹果(每斤5元)、桔子(每斤3.5元)、香蕉(每斤4元),文本框是用来接收数值输入,表示购买了几斤此类水果,都应该有自己的onclick事件处理程序,这些事件处理能够将对应的水果价格添加到总价格中。
(2) 针对提交按钮的事件处理程序必须能产生一个alert窗口,给用户提示总价格。
(3) 对文档中文本框添加真实性检查功能,对文本框输入的检查应该保证在0-99之间。
[解决办法]
我是建议文本框离开焦点后自动把当前的价格计算放到右边表格的div中,我看你div都加id了应该是准备这样。其他的参考另外一个帖子吧。
[解决办法]
<!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>
[解决办法]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BuyFruit.aspx.cs" Inherits="MessageSend.BuyFruit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript" language="javascript"> function Commit() { var AllPay = document.getElementById("txtAllPay").value; alert("您需要支付的总金额为:" + AllPay + "元!"); } function Apple() { var AppleCount = document.getElementById("txtApple").value; if (AppleCount >= 0 && AppleCount < 100) { var ApplePay = AppleCount * 5; return ApplePay; } else { alert("请输入0-99之间的斤数!"); $("#txtApple").val(""); return 0; } } function Banana() { var BananaCount = document.getElementById("txtBanana").value; if (BananaCount >= 0 && BananaCount < 100) { var BananaPay = BananaCount * 4; return BananaPay; } else { alert("请输入0-99之间的斤数!"); $("#txtBanana").val(""); return 0; } } function Orange() { var OrangeCount = document.getElementById("txtOrange").value; if (OrangeCount >= 0 && OrangeCount < 100) { var OrangePay = OrangeCount * 7; return OrangePay; } else { alert("请输入0-99之间的斤数!"); $("#txtOrange").val(""); return 0; } } function Allpay() { var apple = Apple(); var banana = Banana(); var orange = Orange(); var Allpay = apple + banana + orange; $("#txtAllPay").val(Allpay); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="苹果(5元/斤) ,请选择买入"></asp:Label> <input id="txtApple" type="text" onkeyup="Allpay()" /> <asp:Label ID="Label2" runat="server" Text="斤"></asp:Label> </div> <div> <asp:Label ID="Label3" runat="server" Text="香蕉(4元/斤) ,请选择买入"></asp:Label> <input id="txtBanana" type="text" onkeyup="Allpay()" /> <asp:Label ID="Label4" runat="server" Text="斤"></asp:Label> </div> <div> <asp:Label ID="Label5" runat="server" Text="桔子(7元/斤) ,请选择买入"></asp:Label> <input id="txtOrange" type="text" onkeyup="Allpay()" /> <asp:Label ID="Label6" runat="server" Text="斤"></asp:Label> </div> <br /> <div> <asp:Label ID="Label9" runat="server" Text="总金额:"></asp:Label> <input id="txtAllPay" type="text" value="0" /> <asp:Label ID="Label7" runat="server" Text="元"></asp:Label> </div> <br /> <br /> <div> <input id="btnCommit" onclick="Commit()" type="button" value="提交订单" style="width: 100px" /> </div> </form></body></html>
[解决办法]
Banana()
Orange()....?如果有一千种水果。那么很可怕啊。
虽然我写的比较粗,不过水果可以无限个.
只需加class="fruit" rel="3.5"
其中rel为价格
[解决办法]
[code=HTML][/code]<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
span{display:inline-block;
width:100px;
text-align:center;}
#result{color:red;
font-weight:bold;
margin-top:5px;}
</style>
<script type="text/javascript">
function init(){
function $(id){return(document.getElementById(id));}
reg = /^[0-9]{1,2}$/;
p = $("p");
a = $("a");
o = $("o");
result = $("result");
p.value ="";
a.value ="";
o.value ="";
result.value = "";
}
function cal(event){
if(event == a){
if(!a.value.match(reg)){
alert("苹果的数量输入不符")
return false
}
else{
result.value = Number(result.value) + Number(a.value)*3;
}
}
else if(event == o){
if(!o.value.match(reg)){
alert("橘子的数量输入不符")
return false
}
else{
result.value = Number(result.value) + Number(o.value)*2;
}
}
else if(event == p){
if(!p.value.match(reg)){
alert("雪梨的数量输入不符")
return false
}
else{
result.value = Number(result.value) + Number(p.value)*1;
}
}
}
window.onload = init;
</script>
</head>
<body>
<form>
<fieldset>
<legend>自动算价钱</legend>
<span>
<p>种类</p>
<p>数量(斤)</p>
</span>
<span>
<p>苹果</p>
<input id="a" type="text" onchange="cal(a)" style="width:40px; border:1px solid #999;"/>
</span>
<span>
<p>橘子</p>
<input id="o" type="text" onchange="cal(o)" style="width:40px; border:1px solid #999;"/>
</span>
<span>
<p>雪梨</p>
<input id="p" type="text" onchange="cal(p)" style="width:40px; border:1px solid #999;"/>
</span>
</fieldset>
<div>总价:<input type="text" id="result" style="width:20px"/>元</div>
</form>
</body>
</html>
[解决办法]