开发一个XHTML文档,其中包含了一组文本框和一个提交按钮
(1) 文本框的提示内容为苹果(每斤5元)、桔子(每斤3.5元)、香蕉(每斤4元),文本框是用来接收数值输入,表示购买了几斤此类水果,都应该有自己的onclick事件处理程序,这些事件处理能够将对应的水果价格添加到总价格中。
(2) 针对提交按钮的事件处理程序必须能产生一个alert窗口,给用户提示总价格。
(3) 对文档中文本框添加真实性检查功能,对文本框输入的检查应该保证在0-99之间。
------解决方案--------------------
我是建议文本框离开焦点后自动把当前的价格计算放到右边表格的div中,我看你div都加id了应该是准备这样。其他的参考另外一个帖子吧。
------解决方案--------------------
- 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=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>
------解决方案--------------------
- HTML code
<%@ 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>