JavaScript小练习-计算银行卡余额案例

最新推荐文章于 2023-09-04 15:35:43 发布

GT-一二

最新推荐文章于 2023-09-04 15:35:43 发布

阅读量1.9k

点赞数 3

分类专栏： JavaScript基础文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/AAAAA1235555/article/details/123263507

版权

JavaScript基础专栏收录该内容

9 篇文章 2 订阅

订阅专栏

题目描述

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

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

在这里插入图片描述

题目提示
- 思路：
  
  1.我们需要5个变量：银行卡总额、水费、电费、网费、银行卡余额
  
  2.银行卡余额= 银行卡总额 – 水费 –电费 - 网费
  
  3.第一步准备5个变量接受输入的数据
  
  4.第二步计算银行卡余额
  
  5.第三步页面打印生成表格，里面填充数据即可。
  
  6.当然可以提前把html页面搭好。

答案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            text-align: center;
        }

        table {
            width: 700px;
            height: 90px;
            margin: 0 auto;
        }

        table,
        th,
        td {
            border: 1px solid #333;
            /* 为表格设置合并边框模型 */
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>2020年12月消费支出</h2>

    <script>

        // 1. 声明5个变量 
        let total = prompt('请输入银行卡总额:')
        let waterBill = prompt('请输入水费:')
        let dianBill = prompt('请输入电费:')
        let netBill = prompt('请输入网费:')
        let money = total - waterBill - dianBill - netBill
        // console.log(money)
        document.write(`<table>
        <tr>
            <th>银行卡余额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </tr>
        <tr>
            <td>${total}元</td>
            <td>${waterBill}元</td>
            <td>${dianBill}元</td>
            <td>${netBill}元</td>
            <td>${money}元</td>
        </tr>
    </table>`)
    </script>
</body>

</html>

GT-一二

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript小练习-计算银行卡余额案例

题目描述1、用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。2、页面打印一个表格，计算出本月银行卡还剩下的余额。题目提示思路：1.我们需要5个变量：银行卡总额、水费、电费、网费、银行卡余额2.银行卡余额= 银行卡总额 – 水费 –电费 - 网费3.第一步准备5个变量接受输入的数据4.第二步计算银行卡余额5.第三步页面打印生成表格，里面填充数据即可。6.当然可以提前把html页面搭好。答案：<!DOCTYPE html><ht..
复制链接

扫一扫