（一）小案例银行家应用程序-介绍

2024-04-06 03:44
文章标签 介绍 案例 应用程序 银行家

本文主要是介绍（一）小案例银行家应用程序-介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

案例示例如下所示：

在这里插入图片描述

登录之后就会出现下面所示：
在这里插入图片描述

项目案例流程图如下
在这里插入图片描述

● 首先我们建立四个账号对象，用于登录

const account1 = {owner: 'ItShare',movements: [200, 450, -400, 3000, -650, -130, 70, 1300],interestRate: 1.2, // %pin: 1111,
};const account2 = {owner: 'Jessica Davis',movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],interestRate: 1.5,pin: 2222,
};const account3 = {owner: 'Steven Thomas Williams',movements: [200, -200, 340, -300, -20, 50, 400, -460],interestRate: 0.7,pin: 3333,
};const account4 = {owner: 'Sarah Smith',movements: [430, 1000, 700, 50, 90],interestRate: 1,pin: 4444,
};

● 上述我们模拟数据都是来自与Web API，再将四个账户数据存储到一个数组中

const accounts = [account1, account2, account3, account4];

● 其中HTML代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="shortcut icon" type="image/png" href="icon.png" /><linkhref="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"rel="stylesheet"/><link rel="stylesheet" href="style.css" /><title>Bankist</title></head><body><!-- TOP NAVIGATION --><nav><p class="welcome">Log in to get started</p><img src="logo.png" alt="Logo" class="logo" /><form class="login"><inputtype="text"placeholder="user"class="login__input login__input--user"/><!-- In practice, use type="password" --><inputtype="text"placeholder="PIN"maxlength="4"class="login__input login__input--pin"/><button class="login__btn">&rarr;</button></form></nav><main class="app"><!-- BALANCE --><div class="balance"><div><p class="balance__label">Current balance</p><p class="balance__date">As of <span class="date">05/03/2037</span></p></div><p class="balance__value">0000€</p></div><!-- MOVEMENTS --><div class="movements"><div class="movements__row"><div class="movements__type movements__type--deposit">2 deposit</div><div class="movements__date">3 days ago</div><div class="movements__value">4 000€</div></div><div class="movements__row"><div class="movements__type movements__type--withdrawal">1 withdrawal</div><div class="movements__date">24/01/2037</div><div class="movements__value">-378€</div></div></div><!-- SUMMARY --><div class="summary"><p class="summary__label">In</p><p class="summary__value summary__value--in">0000€</p><p class="summary__label">Out</p><p class="summary__value summary__value--out">0000€</p><p class="summary__label">Interest</p><p class="summary__value summary__value--interest">0000€</p><button class="btn--sort">&downarrow; SORT</button></div><!-- OPERATION: TRANSFERS --><div class="operation operation--transfer"><h2>Transfer money</h2><form class="form form--transfer"><input type="text" class="form__input form__input--to" /><input type="number" class="form__input form__input--amount" /><button class="form__btn form__btn--transfer">&rarr;</button><label class="form__label">Transfer to</label><label class="form__label">Amount</label></form></div><!-- OPERATION: LOAN --><div class="operation operation--loan"><h2>Request loan</h2><form class="form form--loan"><input type="number" class="form__input form__input--loan-amount" /><button class="form__btn form__btn--loan">&rarr;</button><label class="form__label form__label--loan">Amount</label></form></div><!-- OPERATION: CLOSE --><div class="operation operation--close"><h2>Close account</h2><form class="form form--close"><input type="text" class="form__input form__input--user" /><inputtype="password"maxlength="6"class="form__input form__input--pin"/><button class="form__btn form__btn--close">&rarr;</button><label class="form__label">Confirm user</label><label class="form__label">Confirm PIN</label></form></div><!-- LOGOUT TIMER --><p class="logout-timer">You will be logged out in <span class="timer">05:00</span></p></main><!-- <footer>&copy; by Jonas Schmedtmann. Don't claim as your own :)</footer> --><script src="script.js"></script></body>
</html>

● CSS代码如下
/*

 * Use this CSS to learn some intersting techniques,* in case you're wondering how I built the UI.* Have fun! 😁*/* {margin: 0;padding: 0;box-sizing: inherit;
}html {font-size: 62.5%;box-sizing: border-box;
}body {font-family: "Poppins", sans-serif;color: #444;background-color: #f3f3f3;height: 100vh;padding: 2rem;
}nav {display: flex;justify-content: space-between;align-items: center;padding: 0 2rem;
}.welcome {font-size: 1.9rem;font-weight: 500;
}.logo {height: 5.25rem;
}.login {display: flex;
}.login__input {border: none;padding: 0.5rem 2rem;font-size: 1.6rem;font-family: inherit;text-align: center;width: 12rem;border-radius: 10rem;margin-right: 1rem;color: inherit;border: 1px solid #fff;transition: all 0.3s;
}.login__input:focus {outline: none;border: 1px solid #ccc;
}.login__input::placeholder {color: #bbb;
}.login__btn {border: none;background: none;font-size: 2.2rem;color: inherit;cursor: pointer;transition: all 0.3s;
}.login__btn:hover,
.login__btn:focus,
.btn--sort:hover,
.btn--sort:focus {outline: none;color: #777;
}/* MAIN */
.app {position: relative;max-width: 100rem;margin: 4rem auto;display: grid;grid-template-columns: 4fr 3fr;grid-template-rows: auto repeat(3, 15rem) auto;gap: 2rem;/* NOTE This creates the fade in/out anumation */opacity: 0;transition: all 1s;
}.balance {grid-column: 1 / span 2;display: flex;align-items: flex-end;justify-content: space-between;margin-bottom: 2rem;
}.balance__label {font-size: 2.2rem;font-weight: 500;margin-bottom: -0.2rem;
}.balance__date {font-size: 1.4rem;color: #888;
}.balance__value {font-size: 4.5rem;font-weight: 400;
}/* MOVEMENTS */
.movements {grid-row: 2 / span 3;background-color: #fff;border-radius: 1rem;overflow: scroll;
}.movements__row {padding: 2.25rem 4rem;display: flex;align-items: center;border-bottom: 1px solid #eee;
}.movements__type {font-size: 1.1rem;text-transform: uppercase;font-weight: 500;color: #fff;padding: 0.1rem 1rem;border-radius: 10rem;margin-right: 2rem;
}.movements__date {font-size: 1.1rem;text-transform: uppercase;font-weight: 500;color: #666;
}.movements__type--deposit {background-image: linear-gradient(to top left, #39b385, #9be15d);
}.movements__type--withdrawal {background-image: linear-gradient(to top left, #e52a5a, #ff585f);
}.movements__value {font-size: 1.7rem;margin-left: auto;
}/* SUMMARY */
.summary {grid-row: 5 / 6;display: flex;align-items: baseline;padding: 0 0.3rem;margin-top: 1rem;
}.summary__label {font-size: 1.2rem;font-weight: 500;text-transform: uppercase;margin-right: 0.8rem;
}.summary__value {font-size: 2.2rem;margin-right: 2.5rem;
}.summary__value--in,
.summary__value--interest {color: #66c873;
}.summary__value--out {color: #f5465d;
}.btn--sort {margin-left: auto;border: none;background: none;font-size: 1.3rem;font-weight: 500;cursor: pointer;
}/* OPERATIONS */
.operation {border-radius: 1rem;padding: 3rem 4rem;color: #333;
}.operation--transfer {background-image: linear-gradient(to top left, #ffb003, #ffcb03);
}.operation--loan {background-image: linear-gradient(to top left, #39b385, #9be15d);
}.operation--close {background-image: linear-gradient(to top left, #e52a5a, #ff585f);
}h2 {margin-bottom: 1.5rem;font-size: 1.7rem;font-weight: 600;color: #333;
}.form {display: grid;grid-template-columns: 2.5fr 2.5fr 1fr;grid-template-rows: auto auto;gap: 0.4rem 1rem;
}/* Exceptions for interst */
.form.form--loan {grid-template-columns: 2.5fr 1fr 2.5fr;
}
.form__label--loan {grid-row: 2;
}
/* End exceptions */.form__input {width: 100%;border: none;background-color: rgba(255, 255, 255, 0.4);font-family: inherit;font-size: 1.5rem;text-align: center;color: #333;padding: 0.3rem 1rem;border-radius: 0.7rem;transition: all 0.3s;
}.form__input:focus {outline: none;background-color: rgba(255, 255, 255, 0.6);
}.form__label {font-size: 1.3rem;text-align: center;
}.form__btn {border: none;border-radius: 0.7rem;font-size: 1.8rem;background-color: #fff;cursor: pointer;transition: all 0.3s;
}.form__btn:focus {outline: none;background-color: rgba(255, 255, 255, 0.8);
}.logout-timer {padding: 0 0.3rem;margin-top: 1.9rem;text-align: right;font-size: 1.25rem;
}.timer {font-weight: 600;
}

● 在此之前，我们要将我们所有需要的元素存储到变量中，方便我们后续使用

const labelWelcome = document.querySelector('.welcome');
const labelDate = document.querySelector('.date');
const labelBalance = document.querySelector('.balance__value');
const labelSumIn = document.querySelector('.summary__value--in');
const labelSumOut = document.querySelector('.summary__value--out');
const labelSumInterest = document.querySelector('.summary__value--interest');
const labelTimer = document.querySelector('.timer');const containerApp = document.querySelector('.app');
const containerMovements = document.querySelector('.movements');const btnLogin = document.querySelector('.login__btn');
const btnTransfer = document.querySelector('.form__btn--transfer');
const btnLoan = document.querySelector('.form__btn--loan');
const btnClose = document.querySelector('.form__btn--close');
const btnSort = document.querySelector('.btn--sort');const inputLoginUsername = document.querySelector('.login__input--user');
const inputLoginPin = document.querySelector('.login__input--pin');
const inputTransferTo = document.querySelector('.form__input--to');
const inputTransferAmount = document.querySelector('.form__input--amount');
const inputLoanAmount = document.querySelector('.form__input--loan-amount');
const inputCloseUsername = document.querySelector('.form__input--user');
const inputClosePin = document.querySelector('.form__input--pin');

这篇关于（一）小案例银行家应用程序-介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/878914。

相关文章

性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善，其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性， 将与教育相关的数据要素在区块链上进行存证确权，在确保数据可信的前提下，促进教育的公平、透明、开放，为教育教学质量提升赋能，实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护，支撑教育资源共享、教学质量评估、
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...
客户案例：安全海外中继助力知名家电企业化解海外通邮困境

客户案例：安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司（以下简称“格兰仕”），成立于1978年，是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地，格兰仕拥有多项国际领先的家电制造技术，连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展，更重视业务流程的高效与顺畅，以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施，其海外业务快速增长，电子邮件成为了关键的沟通工具。
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2