Javascript 需要计算表帮助

Javascript calculation form help needed

我刚刚开始学习和使用 Js,但目前我需要以下表格(由前员工创建)的帮助。目前,最终的 "Tiles Required" 计算显示不正确。例如,如果我在长度和宽度字段中键入 2500 x 2500 "Tiles Required" = 56(在 333 x 333 x 7mm 瓷砖下看到)。

我相信 Js 从一开始的工作方式是 Len = 2500 / 333 = 7.50 - 在这种情况下我需要将这个数字四舍五入为 8。所以我会得到正确的 "Tiles Required" 计算64.

任何人都可以帮助我或告诉我什么是最好的改变方法吗?

// Tile calculator for qty and cost estimation
<!--
var len, wid, area_mt, j,len500,wid500,len480,wid480,area_mt500,area_mt480

function check(form) {
 if(isNumber(form)) {
   len = parseFloat(form.length.value)/333 
   wid = parseFloat(form.width.value)/333 
   len500 = parseFloat(form.length.value)/470 
   wid500 = parseFloat(form.width.value)/470 
   len480 = parseFloat(form.length.value)/495 
   wid480 = parseFloat(form.width.value)/495
  
   calculate_area(form)
}
 else {
 form.element.focus('len')
 }
}
 
function isNumber(form) {
 for(j=0; j<2; j++) {
 var inputStr = form.elements[j].value
  var inputVal = parseInt(inputStr)
   for(var i=0; i<inputStr.length; i++) {
    var oneChar = inputStr.substring(i, i+1)
     if(inputStr == " " || inputVal <= 0 || oneChar > "9") {
      alert("Invalid input in " + form.elements[j].name + " field.")
      return false
      }
   }
 }
 return true
}   
   
function calculate_area(form) {
  var no_tile, no_box, no_box_p, val, no_tile500, no_box500, no_box_p500, val500, no_tile480, no_box480, no_box_p480, val480
  
  if(len < wid) {
   var temp = len
   len = wid
   wid = temp
  }
  area_m = (len * wid) 

  if(len500 < wid500) {
   var temp500 = len500
   len500 = wid500
   wid500 = temp500
  }
  area_m500 = (len500 * wid500) 
   
  if(len480 < wid480) {
   var temp480 = len480
   len480 = wid480
   wid480 = temp480
  }
  area_m480 = (len480 * wid480) 
  
  
    
  var str_m = (" " + area_m)
  area_m = parseFloat(str_m.substring(0, 5)) 
   no_tile = Math.round(area_m )
   no_box = parseInt(no_tile )
   no_box_p = no_tile % 1
      form.NumTile.value = no_tile
   TileCost = Math.round(no_tile *2.49)
      TileCostSP = Math.round(no_tile *2.79)
   form.TileCost.value = '£' + TileCost
      form.TileCostSP.value = '£' + TileCostSP

      
var str_m500 = (" " + area_m500)
  area_m500= parseFloat(str_m500.substring(0, 5)) 
   no_tile500 = Math.round(area_m500)
   no_box500 = parseInt(no_tile500 )
   no_box_p500 = no_tile500 % 1
   form.NumTile500R.value = no_tile500
   Cost500R = Math.round(no_tile500 *3.75)
   form.TileCost500R.value = '£' + Cost500R
   
var str_m480 = (" " + area_m480)
  area_m480= parseFloat(str_m480.substring(0, 5)) 
   no_tile480 = Math.round(area_m480)
   no_box480 = parseInt(no_tile480 )
   no_box_p5480 = no_tile480 % 1   
   form.NumTile480.value = no_tile480
   form.NumTile480R.value = no_tile480 
   Cost480R = Math.round (no_tile480 *4.45)
   Cost480GR = Math.round (no_tile480 *4.75)
   Cost480 = Math.round (no_tile480 *5.99)   
      Cost480C = Math.round (no_tile480 *7.19)
   Cost480PC = Math.round (no_tile480 *7.79)
   form.TileCost480R.value = '£' + Cost480R
   form.TileCost480.value = '£' + Cost480   
   form.TileCost480GR.value = '£' + Cost480GR
   form.TileCost480C.value = '£' + Cost480C
   form.TileCost480PC.value = '£' + Cost480PC
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-language" content="en-GB">
<title>Garage Floor Coverings - Quantity and Cost Comparison Calculator.</title>
<meta name="Description" content="Use The Mototile Calculator To Work Out How Many Of Our Interlocking Garage Floor Tiles You Need and The Likely Cost - Then Place Your Order Online" />
<script type="text/javascript" language="JavaScript1.2" src="stm31.js"></script>
<script type="text/javascript" language="JavaScript1.2" src="scripts/tilecalc2TEST.js"></script>
<link href="styles/mototile.css" rel="stylesheet" type="text/css">
<style type="text/css">
 body{
 background-image:url(images/white-bg.jpg);
 }
 .shopinputred {
 margin: 2px;
 padding: 2px;
 border: 1px solid #FF0000;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #006699;
 background-color: #FFFFCC;
}
</style>
</head>
<body onLoad="document.floortile.length.focus()">
<form id="floortile" action="" name="floortile">
  <table width="304" align="center" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr valign="top" align="center"> 
        <td> <table width="738" height="1125" border="0" align="center" cellpadding="5" cellspacing="0" class="photoframe">
            <tbody>
              <tr bgcolor="#FFFFFF"> 
                <td height="133" colspan="5" align="center" valign="middle" class="title_text3"> <h1 align="left"><font size="3"> 
                    <a href="http://mototile.com"><img src="images/calc-header-logo-280.gif" width="280" height="79" hspace="20" border="0" align="absmiddle"></a>Floor 
                    Tile Cost Comparisons.</font></h1>
                  <p align="left">For assistance or advice on estimating phone <font color="#6977A4"><strong>01329 841416 
                    </strong></font>(M-F 08:00 to 16:30) or email us <font color="#6977A4"><a href="mailto:sales@mototile.com?Subject=%20Mototile%20Enquiry"><strong>sales@mototile.com</strong></a></font><font color="#6977A4"></font></p></td>
              </tr>
              <tr bgcolor="#FFFFFF"> 
                <td height="40" colspan="5" align="center" valign="middle" class="title_text3"> <div align="left"> 
                    <script type="text/javascript" language="JavaScript1.2" src="scripts/menu.js"></script>
                  </div></td>
              </tr>
              <tr align="left" bgcolor="#FFFFFF">
                <td height="100" colspan="5" valign="middle" bgcolor="#FFFFFF">
<p><strong>Note: </strong>This tile estimation and cost comparison tool shows the approximate number of uncut tiles required for the 
                    dimensions input and guideline prices for a floor based on the different tile types. Costs are rounded to the nearest £.</p>
                  <p>Where the floor dimensions require a mix of cut and full tiles to be used the exact quantity of tiles 
                    needed may be higher or lower than the estimate given here - depending on the type of tile interlock.</p>
                  <p>If in doubt contact us with your floor dimensions and we will work out the exact quantities required.</p>
                  </td>
              </tr>
              <tr align="left" bgcolor="#FFFFFF"> 
                <td height="100" colspan="5" valign="middle" bgcolor="#FFFFFF" class="photoframe"> <p align="left"><font color="#FF0000" size="2">Enter 
                    floor measurements in mm - </font><strong><font color="#FF0000" size="2"> </font>&nbsp;Length : 
                    <input class="shopinputred" maxlength="10" size="6" style="line-height: normal;" name="length" value=" " type="text" title="Enter length in mm">
                    &nbsp;mm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Width:&nbsp; 
                    <input id="floorwidth" class="shopinputred" maxlength="10" size="6" style="line-height: normal;" name="width" value=" " type="text" title="Enter width in mm">
                    &nbsp;mm&nbsp;&nbsp;&nbsp;&nbsp;</strong> 
                    <input class="title_text2" title="Calculate" onClick="check(this.form)" style="cursor: pointer;" name="submit" value="Calculate" type="button">
                    &nbsp;</p></td>
              </tr>
              <tr align="center" valign="middle" bgcolor="#FFFFFF"> 
                <td width="80" height="262">&nbsp;</td>
                <td width="153" align="left" valign="top"> <div align="center"> 
                    <p>Mototile Seamless <br>
                      333 x 333 x 7mm </p>
                    <p><img src="thumbs/tile-electric-blue-diamond-128.jpg" width="128" height="128"></p>
                    <p>Various Colours<br>
                      (New PVC)</p>
                  </div></td>
                <td width="149" align="left" valign="top"> <div align="center"> 
                    <p>MotoMat<br>
                      470 x 470 x 12mm </p>
                    <p><img src="thumbs/mototmat-recycled-tile_t.jpg" width="128" height="129"></p>
                    <p>Black (Recyled PVC) </p>
                  </div></td>
                <td width="156" align="center" valign="top"> <p>MotoLock Heavy Duty <br>
                    495 x 495 x 7mm </p>
                  <p><img src="thumbs/moto-lock-tile-blue_t.jpg" width="128" height="123" vspace="3"></p>
                  <p> (New PVC) </p></td>
                <td width="148" align="center" valign="top"> <p>MotoLock Heavy Duty <br>
                    495 x 495 x 7mm<img src="thumbs/moto-lock-tile-greyR_t.jpg" width="128" height="123" vspace="8"></p>
                  <p>Black or Grey<br>
                    (Recycled PVC) <br>
                  </p></td>
              </tr>
              <tr align="center" valign="middle" bgcolor="#FFFFFF"> 
                <td height="79" align="right"> <p align="right">Tiles Required:</p></td>
                <td align="left"> <p align="center"> 
                    <input class="shopinputred" maxlength="10" size="10" style="line-height: normal;" name="NumTile" value=" " type="text" title="Quantity of tiles with no allowance for wasteage">
                  </p></td>
                <td align="center" valign="middle"> <input name="NumTile500R" type="text" class="shopinputred" id="NumTile500R" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10"></td>
                <td align="center" valign="middle"><input name="NumTile480" type="text" class="shopinputred" id="NumTile500ML" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10"></td>
                <td align="center" valign="middle"> <div align="center"> 
                    <input name="NumTile480R" type="text" class="shopinputred" id="NumTile500ML" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="0">
                  </div></td>
              </tr>
              <tr align="center" valign="middle" bgcolor="#FFFFFF"> 
                <td height="134" align="right" valign="top"> <p align="right">&pound; Cost <br>
                    (ex vat) </p></td>
                <td align="left" valign="top"><p align="center"> 
                    <input name="TileCost" type="text" class="calcinput" id="TileCost" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10">
                    <br>
                    * Neutral and Colours<br>
                    <br>
                    <input name="TileCostSP" type="text" class="calcinput" id="TileCostSP" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10">
                    <br>
                    ** Supersport Range </p></td>
                <td align="center" valign="top"> <p> 
                    <input name="TileCost500R" type="text" class="calcinput" id="TileCost500R" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10">
                  </p></td>
                <td align="center" valign="top"> <p align="center"> 
                    <input name="TileCost480" type="text" class="calcinput" id="TileCost480" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10">
                    <br>
                    Black, Dk Grey, Lt Grey</p>
                  <p align="center"> 
                    <input name="TileCost480C" type="text" class="calcinput" id="TileCost480C" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10">
                    <br>
                    Classic Colours <br>
                    <br>
                    <input name="TileCost480PC" type="text" class="calcinput" id="TileCost480PC" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="8">
                    <br>
                    Premium Colours<br>
                    Lt. Blue, Orange, Red</p></td>
                <td align="right" valign="top"> <p align="center"> 
                    <input name="TileCost480R" type="text" class="calcinput" id="TileCost480R" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10">
                    <br>
                    Black<br>
                    <br>
                    <input name="TileCost480GR" type="text" class="calcinput" id="TileCost480GR" style="line-height: normal;" title="Quantity of tiles with no allowance for wasteage" value=" " size="10" maxlength="10">
                    <br>
                    Grey </p></td>
              </tr>
              <tr align="center" valign="middle" bgcolor="#FFFFFF"> 
                <td height="40" colspan="5"> <p align="center" class="1pixlav">&nbsp;</p>
                  <p align="center"><img src="images/Seamless-Motolock-tile-colours.png" alt="Mototile Seamless floor tile colour range." width="581" height="248" vspace="8"></p>
                  <p align="left"><a name="DimensionsGuide"></a>TILE DIMENSION GUIDE:</p>
                  <p align="left">We quote Motolock and Motomat tile requirements based on an<strong> inside edge to outside 
                    edge </strong>measurement. <br>
                    We have found that this improves estimating accuracy. Other dimensions, which take account of 1) all tabs 
                    and 2) no tabs, are also shown below.</p>
                  <p><img alt="How we quote interlocking tile dimensions for MotoMat and MotoLock tiles." height="163" src="images/tile-measurement-variants.jpg" width="480"></p>
                  <table width="618" height="138" bordercolor="1">
                    <tr> 
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr> 
                      <td width="89" height="42"> <p>Tile Type</p></td>
                      <td width="179"><div align="center"> 
                          <p>Outside to Outside (mm)</p>
                        </div></td>
                      <td width="156"><div align="center"> 
                          <p>Inside to Inside (mm)</p>
                        </div></td>
                      <td width="174"><div align="center"> 
                          <p><strong>Inside to Outside (mm)</strong></p>
                        </div></td>
                    </tr>
                    <tr> 
                      <td height="42"> <div align="left"> 
                          <p>MotoLock</p>
                        </div></td>
                      <td><div align="center"> 
                          <p>510 x 510</p>
                        </div></td>
                      <td><div align="center"> 
                          <p>480 x 480</p>
                        </div></td>
                      <td><div align="center"> 
                          <p><strong>495 x 495</strong></p>
                        </div></td>
                    </tr>
                    <tr> 
                      <td height="42"> <div align="left"> 
                          <p>MotoMat</p>
                        </div></td>
                      <td><div align="center"> 
                          <p>495 x 495</p>
                        </div></td>
                      <td><div align="center"> 
                          <p>445 x 445</p>
                        </div></td>
                      <td><div align="center"> 
                          <p><strong>470 x 470</strong></p>
                        </div></td>
                    </tr>
                  </table>
                  <p align="left"> &nbsp;Quoted dimensions for Mototile Seamless tiles are based on exact width (333 x 333 
                    mm) due to the flush fit edge design.</p>
                  <p align="left">&nbsp;</p>
                  <div align="left"></div></td>
              </tr>
            </tbody>
          </table>
          
        </td>
      </tr>
    </tbody>
  </table> 
 </form>
</body>
</html>

尝试Math.ceil()。这是 Javascript.

的汇总方法
len = Math.ceil(parseFloat(form.length.value)/333)