开发一个XHTML文档,其中包含了一组文本框和一个提交按钮(1) 文本框的提示内容为苹果(每斤5元)、桔子(每斤3.5元)、香蕉(每斤4元),文本框是用来接收数值输入,表示购买了几斤此类水果,都应该有自己的onclick事件处理程序,这些事件处理能够将对应的水果价格添加到总价格中。(2) 针对提交按钮的事件处理程序必须能产生一个alert窗口,给用户提示总价格。(3) 对文档中文本框添加真实性检查功能,对文本框输入的检查应该保证在0-99之间。

解决方案 »

  1.   

    <!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">#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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>
     
    </p>
    </body>
    </html>
    我已经写了这一些了
      

  2.   


    <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内你应该都懂的,就不做了。
      

  3.   


    <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>
    修改了一下
      

  4.   


    <!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>