停车场计费系统（HTML版）————JavaScript的应用

利用JavaScript编制的一个停车场收费界面，完成以下功能：

• 1）单击“设置”按钮，设置停车场总车位数量、每小时收费标准（分小型车、中型车、大型车三种）。
• 2）录入车牌、车型、车位，单击“入场”按钮，开始计时收费，车位不足时，不许入场。
• 3）单击“离场”按钮，停止计时，显示车牌、车型、车位、停车时间，应收费额（不足半小时部分不收费）。

• ---

  

 

 

 

 

 

部分代码展：

<div style="margin-left:15%;padding:1px 16px;height:1000px;">
    <!--Park-->
    <div style="overflow: scroll;height: 80%" id="Park">
        <form name="tit">
            <table border="1">
                <tr>
                    <td colspan="5">车位剩余量：<input id="num" style="border: 0px;width: 30px" disabled>价格：<input id="price"
                                                                                                             style="border: 0px;width:300px"
                                                                                                             disabled>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">车位</td>
                    <td style="width: 150px">车号</td>
                    <td style="width: 100px">车型</td>
                    <td style="width: 100px">入场时间</td>
                    <td style="width: 100px">离场</td>
                </tr>
                <tbody id="show">

                </tbody>
            </table>
        </form>
    </div>

    <!--设置-->
    <div style="position: relative;top: 80%;" id="设置">
        <p>&nbsp;</p>
        <form name="Fsz">
            <p>
                设置车位数量：
            </p>
            <p>
                <input name="setcw" style="margin-left: 3%;" type="number" max="100" min="0" placeholder="辆">
            </p>
            <p>
                设置收费标准：
            </p>
            <p>
                <input name="setcfd" style="margin-left: 3%;" type="number" min="0" placeholder="元/小时">大
            </p>
            <p>
                <input name="setcfz" style="margin-left: 3%;" type="number" min="0" placeholder="元/小时">中
            </p>
            <p>
                <input name="setcfx" style="margin-left: 3%;" type="number" min="0" placeholder="元/小时">小
            </p>
            <p>
                <input type="button" style="margin-left: 3%;" onclick="cls()" value="重置">
                <input type="button" style="margin-left: 3%;" onclick="set()" value="设置">
            </p>
        </form>
    </div>

    <!--入场-->
    <div style="position: relative;top: 160%;" onclick="r()" id="入场">
        <p>&nbsp;</p>
        <form name="Frc" style="margin-left: 1%">
            <p>
                选择车位：<input name="rccw" type="number" max="100" min="0">
            </p>
            <p>
                入场时间：<input name="rcsj" type="time">
            </p>
            <p>
                录入车牌：<input name="rcch" type="text" max="100" min="0">
            </p>
            <p>
                请选择车型:
                <input name="rccx" type="radio" value=0 checked>大型车
                <input name="rccx" type="radio" value=1>中型车
                <input name="rccx" type="radio" value=2>小型车
            </p>
            <p>
                <input type="button" style="margin-left: 3%;" onclick="cls()" value="重置">
                <input type="button" style="margin-left: 5%;" onclick="rc()" value="入场">
            </p>
        </form>
    </div>

    <!--离场-->
    <div style="position: relative;top: 240%;height: 80%" id="离场">
        <p>&nbsp;</p>
        <form name="Fcc" style="margin-left: 1%">
            <p>
                请输入车牌：<input name="lcch" type="text">
            </p>
            <p>
                离场时间：<input name="lcsj" type="time">
            </p>
            <p>
                <input type="button" style="margin-left: 3%;" onclick="cls()" value="重置">
                <input type="button" style="margin-left: 3%;" onclick="lc()" value="离场">
            </p>
            <p>
                车型：<input name="lccx" type="text" readonly>
            </p>
            <p>
                车位：<input name="lccw" type="text" readonly>
            </p>
            <p>
                车费：<input name="lccf" type="text" readonly>
            </p>
        </form>
    </div>
</div>

示：