简易版ATM增删改查

81 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第18天,点击查看活动详情

1.进入页面弹出提示操作信息

QQ截图20220617204329.png 2.按提示输入1,显示用户信息

QQ截图20220617204433.png 3.点击2添加用户信息,如果用户id已经存在,给出提示,退出操作,添加成功会给出添加成功提示,点击1查询便可以看到添加成功

QQ截图20220617204551.png 4.点击3修改客户信息,如果用户Id不存在则给出提示,重新输入,如果存在可以进行修改 ,可以看到id为1的信息修改了

QQ截图20220617205716.png 5.输入4删除信息,如果用户id不存在,则给出提示,重新输入,如果存在则给出提示(你确定删除吗),点击确定才可以删除

QQ截图20220617210133.png 6.点击输0,则退出系统

7.如果输入操作失败,则给出提示重新输入

 <script>
    let ATM = {
    

客户信息:

        user: [
            {
                id: 1,
                uname: '张三',
                money: 100
            }, {
                id: 2,
                uname: '李四',
                money: 1000
            }, {
                id: 3,
                uname: '王五',
                money: 1000
            },
        ],

循环输入框

        menu: function () {

   弹出输入框,供用户选择

            let caozuo = parseFloat(prompt('请输入您的操作选择\n1 查询用户 2 添加用户 3 修改用户 4 删除用户 0 退出国库'))
            switch (caozuo) {
                case 1:
                    // 调用查询函数
                    this.show();
                    // 是回调函数,使用switch  结束之后再次循环
                    this.menu();
                    break;
                case 2:
                    // 调用添加函数
                    this.add()
                    this.menu();
                    break;
                case 3:
                    // 调用修改函数
                    this.amned()
                    this.menu();
                    break;
                case 4:
                    // 调用删除函数
                    this.delete()
                    this.menu();
                    break;
                case 0:
                    this.tuichu()
                    this.menu();
                    break;
                default:
                    alert('输入错误,请按提示重新输入\n1 查询用户 2 添加用户 3 修改用户 4 删除用户 0 退出国库')
            }

        },

查询用户

        show: function () {

            let str = '账号 姓名 金额 \n'
            // this是函数的内置对象,谁使用指向谁,
            // 循环user
            this.user.forEach(function (a) {
                // `${变量}`  es6中模板字符串
                // 变量接收数组中id的值,名字的值,金额的值
                // a代表数组中的值
                // \n代表换行
                str += `${a.id}${a.uname}${a.money}\n`
            })
            alert(str)
        },

添加用户

        add: function () {
            let id = parseFloat(prompt('请输入您要添加的id'))
            // 设置一个变量接收数组中是否有输入的这个值,返回的是值的下标
            // 找不到返回-1
            let index = this.user.findIndex(i => i.id == id)
        // =-1代表不存在,!=-1代表存在
            while (index != -1) {
                alert('对不起,您添加的用户已存在\n你是贼吧,这都能输错')
                // 存在的情况下继续输入要添加的id,直到不存在
                id = parseFloat(prompt('请输入您要添加的id'))
                index = this.user.findIndex(i => i.id == id)
            }
            let uname = prompt('请输入您要添加的姓名')
            let money = prompt('请输入您要添加的金额')
            let new_user = {
                id: id,
                uname: uname,
                money: money
            }
            this.user.push(new_user)
            alert('恭喜您添加用户成功')
        },

修改用户

       amned: function () {
            let id = parseFloat(prompt('请输入您要修改的id'))
            let amned_user = this.user.find(z => z.id == id)
            while (this.user.indexOf(amned_user)==-1) {
                alert('抱歉您输入的用户不存在,请重新输入')
                id = parseFloat(prompt('请输入您要修改的id'))
                amned_user = this.user.find(z => z.id == id)
            }
            amned_user.uname = prompt('请输入您要修改的姓名')
            amned_user.money = parseFloat(prompt('请输入您要修改的金额'))

            alert('恭喜您修改成功')}

删除用户

      delete: function () {
            let id = parseFloat(prompt('请输入您要删除的id'))

            let index = this.user.findIndex(z => z.id == id)
            while (index == -1) {
                alert('不好意思,您输入用户不存在')
                id = parseFloat(prompt('请输入您要删除的id'))
                index = this.user.findIndex(z => z.id == id)
            }
            if (confirm("你确定删除吗")) {
                this.user.splice(index, 1)
                alert('恭喜您,删除成功')
            }
        }
    ATM.menu();
</script>