当前位置: 代码迷 >> JavaScript >> 那位牛人愿意帮帮忙?小弟我这个作业明天交,临时学来不及了。帮忙的万分感谢哈。
  详细解决方案

那位牛人愿意帮帮忙?小弟我这个作业明天交,临时学来不及了。帮忙的万分感谢哈。

热度:116   发布时间:2012-03-24 14:00:47.0
那位牛人愿意帮帮忙??我这个作业明天交,临时学来不及了。。帮忙的万分感谢哈。。。。
开发一个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元\斤 )&nbsp;<input type="text"  value="0" size="4" class="fruit" rel="5">

</form>
<form name="form2">
桔子(3.5元\斤)&nbsp;<input type="text"  value="0" size="4" class="fruit" rel="3.5">

</form>
<form name="form3">
香蕉( 4元\斤 )&nbsp;<input type="text"  value="0" size="4" class="fruit" rel="4">

</form>

<form name="form3">
日蕉( 8元\斤 )&nbsp;<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>
 
  相关解决方案