如何在php中创建PC计算器脚本

how to create pc calculator script in php

本文关键字：PC 计算器脚本创建 php 更新时间：2023-09-26

我有两个表，一个是类别，一个是产品。现在我想要PC计算器。

我有基于数据库动态生成的所有字段。那么我怎样才能写这样的脚本呢

<table ALIGN=CENTER WIDTH=100% BORDER=1 CELLSPACING=1 CELLPADDING=3>
    <tr>
        <th>Category Name</th>
        <th>Product Name</th>
        <th>Price</th>
    </tr>           
    <tr class="odd">
        <td>Speaker</td>
        <td>
            <select name="1" size="1" id="1">
                <option value="1200.00">intex</option>
                <option value="2100.00">creative</option>
                <option value="1400.00">intex 2.1</option>
                <option value="2000.00">intex 2.1 with woofer</option>
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>Laptop</td> 
        <td>
            <select name="3" size="1" id="3">
                <option value="31000.00">sony</option>
                <option value="31500.00">hp</option>
                <option value="31000.00">Acer</option>
                <option value="36000.00">ibm</option>
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>Mouse</td>
        <td>
            <select name="4" size="1" id="4">
                <option value="120.00"> teccom</option>
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>CPU</td>
        <td>
            <select name="6" size="1" id="6">
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>Projector</td>
        <td>
            <select name="7" size="1" id="7">
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>Anti Virus</td>
        <td>
            <select name="23" size="1" id="23">
                <option value="450.00">McAfee</option>
                <option value="1200.00">AVG</option>
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>Processor</td>
        <td>
            <select name="59" size="1" id="59">
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>testing</td>
        <td>
            <select name="60" size="1" id="60">
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>sadfasdfasdfadsfad</td>
        <td>
            <select name="61" size="1" id="61">
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr class="odd">
        <td>dfgd</td>
        <td>
            <select name="62" size="1" id="62">
            </select>
        </td>
        <td><div id="t1" class="price">0</div></td>
    </tr>
    <tr>
        <td></td>
        <td>Total</td>
        <td><div id="total"></div></td>
    </tr>
</table>

这里是jQuery

jQuery(document).ready(function() {
    $("#sellp").change(function () {
        var str = 0.00;
        $("#sellp :selected").each(function () {
            var test = $(this).val();
            //alert(test);
            var tr = parseInt(str) + parseInt(test);
            //alert(tr);
            $("#t1").text(test);
        });
    });
    var sum = 0;
    $("form :element").change(function() {
        $('.price').each(function() {
        sum += parseFloat($(this).text());
    });
    $('#total').html(sum) });
});

先显示一些代码。

假设页面加载时所有项都在页面中，您需要添加一些事件处理程序

这里是纯JS - jQuery可能更优雅。您可能需要从这个开始，然后添加验证。如果您以一种易于访问

的方式命名字段，那么您的工作将会轻松得多。

<html>
<head>
<script>
function calc(theForm) {
  var total = 0;
  for (var i=1;;i++) {
    var item = theForm.elements["item_"+i];
    if (item) {
      var price =  item.options[item.selectedIndex].value;
      if (price && !isNaN(price)) {
        price = parseFloat(price);
        total+=price;
        var priceId = item.id.replace('item','price');
        document.getElementById(priceId).innerHTML=price.toFixed(2);
      }
    }
    else break;
  }
  if (total) document.getElementById('total').innerHTML="$"+total.toFixed(2);
}
window.onload=function() {
  var theForm = document.forms[0]; // first form on page
  for (var i=0,n=theForm.elements.length;i<n;i++) {
   if (theForm.elements[i].type.indexOf("select") !=-1)  {
      theForm.elements[i].onchange=function() { calc(this.form); }
    }
  }
  theForm.onsubmit=function() { calc(this); return validate(this) }
  calc(theForm)
}
</script>
</head>
<body>
<form>
<table   ALIGN=CENTER WIDTH=100% BORDER=1 CELLSPACING=1 CELLPADDING=3 >
                             <tr>
                             <th>Category Name</th>
                             <th>Product Name</th>  
                             <th>Price</th>
                             </tr>           
                                                        <tr class="odd">
                            <td>Speaker </td>

                            <td><select name="item_1" size="1" id="item_1">
                                                            <option value="1200.00"> intex</option>
                                                            <option value="2100.00"> creative</option>
                                                            <option value="1400.00"> intex 2.1</option>
                                                            <option value="2000.00"> intex 2.1 with woofer</option>
                            </select>                           
                            </td>
                            <td><div id="price_1" class="price">0</div></td>
                            </tr>
                            <tr class="odd">
                            <td>Laptop </td>

                            <td><select name="item_2" size="1" id="item_2">
                                                            <option value="31000.00"> sony</option>
                                                            <option value="31500.00"> hp</option>
                                                            <option value="31000.00"> Acer</option>
                                                            <option value="36000.00"> ibm</option>
                            </select>                           
                            </td>
                            <td><div id="price_2" class="price">0</div></td>
                            </tr>
                            <tr class="odd">
                            <td>Mouse </td>

                            <td><select name="item_3" size="1" id="item_3">
                                                            <option value="120.00"> teccom</option>
                            </select>                           
                            </td>
                            <td><div id="price_3" class="price">0</div></td>
                            </tr>
</table>
</form>
Total: <span id="total"></span>