js-基础-案例-银行卡余额求解

最新推荐文章于 2022-05-15 19:11:04 发布

Jikel

最新推荐文章于 2022-05-15 19:11:04 发布

阅读量454

点赞数 1

分类专栏： JavaScript js有趣小案例文章标签： js

本文链接：https://blog.csdn.net/weixin_54902466/article/details/116573203

版权

JavaScript 同时被 2 个专栏收录

55 篇文章 1 订阅

订阅专栏

js有趣小案例

39 篇文章 1 订阅

订阅专栏

项目场景：

在使用javascript进行简单的运算逻辑

问题描述：

用户输入银行卡总数/消耗的水费/消耗的电费/消耗的网费/消耗的生活费
要求:求出最后银行卡号的余额是多少?(用表格完成)

答案如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }

        table {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            margin: auto;
        }

        th,
        td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <script>
        let a = prompt('请输入银行卡的总数')
        let b = prompt('请输入水费')
        let c = prompt('请输入电费')
        let d = prompt('请输入生活费')
        let e = prompt('请输入网费费')
        let g = a-b-c-d-e
        // document.write()通过``字符串拼接可以解析标签
        document.write(`                         
        <h2>2021年银行卡余额</h2>
       <table>
        <tr>
            <th>银行卡金额</th>
            <th>水费</th>
            <th>电费</th>
            <th>生活费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </tr>
        <tr>
            <td>${a}</td>
            <td>${b}</td>
            <td>${c}</td>
            <td>${d}</td>
            <td>${e}</td>
            <td>${g}</td>
        </tr>
       </table>
        `)
    </script>
</body>

</html>

原因分析：

我们要熟练使用这些运算符进行一些简单的运算逻辑的进行 document.write()的方法带有解析标签的作用,我们可以搭建好标签,然后将变量通过模板字符串的形式拼接进去,得到正确的值.

Jikel

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js-基础-案例-银行卡余额求解

项目场景：在使用javascript进行简单的运算逻辑问题描述：用户输入银行卡总数/消耗的水费/消耗的电费/消耗的网费/消耗的生活费要求:求出最后银行卡号的余额是多少?(用表格完成)答案如下:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫

专栏目录