计算银行卡余额案例

js案例1
题目描述

1、用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。

2、页面打印一个表格，计算出本月银行卡还剩下的余额。

解题步骤
1.设置5个变量：银行卡总额、水费、电费、网费、银行卡余额

2.银行卡余额= 银行卡总额 – 水费 –电费 - 网费

3.第一步准备5个变量接受输入的数据

4.第二步计算银行卡余额

5.第三步页面打印生成表格，里面填充数据即可。

 <script>
        let total = +prompt('请输入银行卡总额')
        let waterFees = +prompt('请输入水费')
        let eleFees = +prompt('请输入电费')
        let intFees = +prompt('请输入网费')
        let balance = total-waterFees-eleFees-intFees
        document.write(`
        <table>
        <tr>
            <th>银行卡总额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </tr>
        <tr>
            <td>${total}</td>
            <td>${waterFees}</td>
            <td>${eleFees}</td>
            <td>${intFees}</td>
            <td>${balance}</td>
        </tr>
    </table>
        `)

    </script>

css样式

 <style>
        h2{
            text-align: center;
        }
        table{
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }
        th{
            padding: 5px 30px;
        }
        table,
        th,
        td{
            border: 1px solid #000;

        }
    </style>