【知了堂学习笔记】_JavaScript之DOM操作案例（ATM机）

本文链接：https://blog.youkuaiyun.com/TANGLHUI/article/details/78754995

本文介绍了一个使用JavaScript实现的ATM机模拟系统。该系统包括登录验证、取款、存款等功能，并通过DOM操作实时更新账户余额。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

js操作DOM的小案例——ATM机

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        div{
            width: 300px;
            height:200px;
            margin: 0 auto;
            border: 1px solid black;
            border-radius: 5px;
            text-align: center;
        }
        p{
            font-size: 20px;
        }
        input{

            width: 150px;
            height:20px;
        }
        button{
            border: 0px;
            padding: 5px;
            background-color: green;
            color: white;
            }

    </style>
    <body>
        <div>
            <p>ATM机</p>
            <p><label>账号：</label><input type="text" id="account"></p>
            <p><label>密码：</label><input type="password" id="passwordatm"></p>
            <p onclick="login()"><button >登录</button></p>
        </div>
    </body>
</html>
<script>
    var i=2;//输入的次数
    //判断卡号是否位数字
    function isNaNAccount(account){
        return isNaN(account);
    }
    //判断输入的卡号和密码是否为空
    function isNaNAccountAndPwd(account,passwordatm){
        if((account.length>0)&&(passwordatm.length>0)){
            return true;
        }
        return false;
    }
    //登录事件
    function login(){
        var account = document.getElementById("account").value;
        var passwordatm = document.getElementById("passwordatm").value;
        console.log(typeof account);
        console.log(passwordatm);
        if(isNaNAccount(account)){
            alert("卡号必须是数字");
            return;
        }
        if(!(isNaNAccountAndPwd(account,passwordatm))){
            alert("卡号和密码都不能为空");
            return;
        }

        if((i>0) && (account=="123456789")&&(passwordatm="123")){
            window.location.href="http://127.0.0.1:8020/reviewJS/DOM%E6%93%8D%E4%BD%9C/ATMindex.html?__hbt=1512374587088";
        }else{
            if(i==0){
                alert("你的账号已被锁定！");
                return;
            }
            alert("你还剩"+i+"次机会！");
            i--;
            return ;
        }
    }
</script>

ATM机主页

实现了取款，存款的操作
取款的金额超过余额，将有错误提示，不允许操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        div{
            width: 300px;
            height:200px;
            margin: 0 auto;
            border: 1px solid black;
            border-radius: 5px;
            text-align: center;
        }
        p{
            font-size: 20px;
            text-align: left;
        }
        input{

            width: 150px;
            height:20px;
        }
        button{
            border: 0px;
            padding: 5px;
            background-color: green;
            color: white;
            }
    </style>
    <body>
        <div>
            <p><label>余额：</label><input type="text" id="balance" value="2000.00" disabled="disabled"></p>
            <p><label>存款：</label><input type="text" id="deposit">&nbsp;<button onclick="deposit()">存款</button></p>
            <p><label>取款：</label><input type="text" id="withdraw">&nbsp;<button onclick="withDraw()">取款</button></p>
        </div>
    </body>
</html>

<script>
    //输入的是否为数字
    function isNumber(number){
        return isNaN(number);
    }
    //存款操作
        function deposit(){
            var balance = parseFloat(document.getElementById("balance").value);
            var deposit = document.getElementById("deposit").value;

            if(!deposit.length>0){
                alert("请输入你要存款的金额..");
                return;
            }

            if(isNumber(deposit)){
                alert("请输入数字！");
                return;
            }
            balance += parseFloat(deposit);
            document.getElementById("balance").value = balance;

        }
    //取款操作
    function withDraw(){
            var balance = parseFloat(document.getElementById("balance").value);
            console.log(typeof balance);
            var withdraw =document.getElementById("withdraw").value;

            if(!withdraw.length>0){
                alert("请输入你要取款的金额..");
                return;
            }

            if(isNumber(withdraw)){
                alert("请输入数字！");
                return;
            }
            if(parseFloat(withdraw) >balance){
                alert("余额不足请重新输入！");
                return;
            }
            balance -=withdraw;
            document.getElementById("balance").value = balance;

    }
</script>