云社区 博客 博客详情
云社区 博客 博客详情

web前端开发之用JavaScript来实现简易ATM机

运气男孩 发表于 2020-07-20 01:03:22 07-20 01:03
运气男孩 发表于 2020-07-20 01:03:22 2020/07/20
1
1

【摘要】 用JavaScript来实现简易ATM机,简单实现下面几个效果

大家好,今天来用js写一个趣味小程序

用JavaScript来实现简易ATM机,简单实现下面几个效果

    1、假设里面现存有1000块钱

    2、如果存钱,就输入钱数加上先存的钱数,之后弹出显示余额提示框

    3、 如果取钱,就减去取的钱数,之后弹出显示余额提示框,如果不足,提示取款失败

    4、如果显示余额,就输出余额

    5、如果退卡,弹出退出信息提示框

首先,理下思路,第一步得实现有4个选择项,得获取用户输入的选项执行操作,这里就用prompt()实现

prompt('请您选择下一步要进行的操作:'+'\n'+'1.存钱'+'\n'+'2.取钱'+'\n'+'3.显示余额'+'\n'+'4.退出');

效果如下:

由于prompt()默认取回的字符串类型,这里我们要将它转为浮点数,使用parseFloat 将prompt默认取回的字符串类型转为数字(浮点型)

第二步

主体使用do...while语句承载ATM整个程序,先执行循环体,再来判断条件,也就是当用户输入"4"退出循环,否则循环执行ATM程序主体

第三步

    使用swith语句来接收用户的选择并处理ATM存取逻辑,利用if语句判断取钱是否存在不足的情况,

结合上面所述情况,大概就是这个样子:

思路理完了,咱们总的来实验看看,到底可行不!

存钱

余额>取钱

余额<取钱

退卡


源代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ATM简易取款机</title>

    <script>

        var money = 1000;

        var ChooseNum = 0;//变量初始化

        do{

            ChooseNum = parseInt(prompt('请您选择下一步要进行的操作:'+'\n'+'1.存钱'+'\n'+'2.取钱'+'\n'+'3.查询余额'+'\n'+'4.退卡')); //将取回的字符串转化

            switch(ChooseNum){

                case 1:

                    money += parseFloat(prompt('请您输入存钱的金额'));

                    alert('存款成功!'+'\n'+'您的余额为:'+money);

                    break;

                case 2:


                    if(money < parseFloat(prompt('请输入取出的金额'))){

                        alert('取款失败!'+'\n'+'您的余额不足');

                    }else{

                            

                         money -= parseFloat(prompt('请确认您要取钱的金额'));

                        alert('取款成功!'+'\n'+'您的余额为:'+money);  

                    }

                    break;

                case 3:

                    alert('您的余额为:'+money);

                    break;

                case 4:

                    alert('您已经退出,请取走卡片!');

                    break;

            }   

        }while(ChooseNum != 4)


    </script>

</head>

<body>

    

</body>

</html>


分享完毕,如有错误或者需要改进的地方希望评论区指正,我相信勤能补拙!


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 1
点赞
分享文章到微博
分享文章到朋友圈

评论 (1)


运气男孩

1楼2020-07-20 01:06:56
0/1000
评论

登录后可评论,请 登录注册

评论

您没有权限执行当前操作

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消