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

本文介绍了一个使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值