向银行家应用程序添加日期

news2024/11/25 15:47:56

● 首先我们将下面图片上的时间更换成现在的时间
在这里插入图片描述

const now = new Date();
const day = now.getDate();
const month = now.getMonth() + 1;
const year = now.getFullYear();
const hour = now.getHours();
const min = now.getMinutes();

labelDate.textContent = `${day}/${month}/${year}, ${hour}:${min}`;

在这里插入图片描述

● 但是一般情况下,我们更喜欢能看到04/05这样的表达方式

const now = new Date();
const day = `${now.getDate()}`.padStart(2, 0);
const month = `${now.getMonth() + 1}`.padStart(2, 0);
const year = now.getFullYear();
const hour = `${now.getHours()}`.padStart(2, 0);
const min = `${now.getMinutes()}`.padStart(2, 0);

labelDate.textContent = `${day}/${month}/${year}, ${hour}:${min}`;

在这里插入图片描述

注:padStart后面有两个参数,第一个参数就是必须为几位数,不够的用第二个参数补齐;

存取款时间

在这里插入图片描述

 movs.forEach(function (mov, i) {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const date = new Date(acc.movementsDates[i]);
    const day = `${date.getDate()}`.padStart(2, 0);
    const month = `${date.getMonth() + 1}`.padStart(2, 0);
    const year = date.getFullYear();
    const displayDate = `${day}/${month}/${year}`;

    const html = `
      <div class="movements__row">
        <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
        <div class="movements__date">${displayDate}</div>
        <div class="movements__value">${mov.toFixed(2)}€</div>
      </div>
    `;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};
//
这段代码是一个循环,用于遍历movs数组中的每个元素,并根据元素的正负值确定交易类型(存款或取款)。然后,它创建一个表示交易日期的Date对象,并使用该对象来获取日期、月份和年份,并格式化为“dd/mm/yyyy”的形式。接下来,它根据交易类型、日期和交易金额,生成HTML代码,并将其插入到指定的容器元素中。

● 但是我们在申请贷款的时候会发现,时间并没有进行更新
在这里插入图片描述

这是因为我们的数组中仅仅定义了八个时间,当增加了一个我们无法读取到
在这里插入图片描述

● 很简单,我们只需要在每次转账或者贷款的时候添加一下此时的时间就可以了

//转账
if (
    amount > 0 &&
    receiverAcc &&
    currentAccount.balance >= amount &&
    receiverAcc?.username !== currentAccount.username
  ) {
    // Doing the transfer
    currentAccount.movements.push(-amount);
    receiverAcc.movements.push(amount);

    currentAccount.movementsDates.push(new Date().toISOString());
    receiverAcc.movementsDates.push(new Date().toISOString());

    // Update UI
    updateUI(currentAccount);
  }
});
//贷款
btnLoan.addEventListener('click', function (e) {
  e.preventDefault();

  const amount = Math.floor(inputLoanAmount.value);

  if (amount > 0 && currentAccount.movements.some(mov => mov >= amount * 0.1)) {
    // Add movement
    currentAccount.movements.push(amount);

   currentAccount.movementsDates.push(new Date().toISOString());

    // Update UI
    updateUI(currentAccount);
  }
  inputLoanAmount.value = '';
});

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1671784.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从头开始学Spring—01Spring介绍和IOC容器思想

目录 1.Spring介绍 1.1Spring概述 1.2特性 1.3五大功能模块 2.IOC容器 2.1IOC思想 ①获取资源的传统方式 ②反转控制方式获取资源 ③DI 2.2IOC容器在Spring中的实现 ①BeanFactory ②ApplicationContext ③ApplicationContext的主要实现类 1.Spring介绍 1.1Sprin…

ASP.NET Web Api 如何使用 Swagger 管理 API

前言 Swagger 是一个开源的框架&#xff0c;支持 OpenAPI 规范&#xff0c;可以根据 API 规范自动生成美观的、易于浏览的 API 文档页面&#xff0c;包括请求参数、响应示例等信息&#xff0c;并且&#xff0c;Swagger UI 提供了一个交互式的界面&#xff0c;可以帮助我们快速…

本来还挺喜欢……

前阵子买了个天空星开发板&#xff0c;到手之后发觉不对劲。 之前我们玩玩开发板都是用的面包板的&#xff0c;就算是ESP那种比较宽的板子用两个面包板拼一下也勉强可以用。 但是天空星它的引脚是分为两组&#xff0c;每组有两排&#xff0c;如果我们还是直接使用面包板的话&a…

Pencils Protocol 提供层次化的 Staking,品牌升级不断

Pencils Protocol 是一个 Scroll 生态中的一个综合应用平台&#xff0c;在全新的品牌升级后(原为 Penpad)&#xff0c;其在原有的 LaunchPad 的基础上&#xff0c;进一步向收益聚合器、RWA 等板块进行全新的拓展。目前&#xff0c;Pencils Protocol 生态的整体功能板块包括 Lau…

Kubernetes——两万字超细致集群搭建平台规划

目录 前言——常见的K8S安装部署方式 一、Kubernetes平台规划 1.单Master集群架构 2.多Master集群架构 二、集群规划 1.服务器硬件配置推荐 2.操作系统初始化 2.1关闭防火墙 2.2关闭SElinux 2.3关闭Swap 2.4添加Hosts 2.5调整内核参数 2.5同步时间 三、集群搭建…

【每日刷题】Day39

【每日刷题】Day39 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 622. 设计循环队列 - 力扣&#xff08;LeetCode&#xff09; 2. 387. 字符串中的第一个唯一字符 - …

C++类细节,反汇编,面试题02

文章目录 2. 虚函数vs纯虚函数3. 重写vs重载vs隐藏3.1. 为什么C可以重载&#xff1f; 4. struct vs union4.1. 为什么要内存对齐&#xff1f; 5. static作用6. 空类vs空结构体6.1. 八个默认函数&#xff1a;6.2. 为什么空类占用1字节 7. const作用7.1 指针常量vs常量指针vs常量…

k8s v1.20二进制部署

目录 一、环境准备 二、操作系统初始化配置 2.1.关闭防火墙 ​编辑 2.2.关闭selinux 2.3.关闭swap 2.4.根据规划设置主机名 2.5在master添加hosts 2.6.调整内核参数 2.7.时间同步 三、部署 docker引擎 3.1.所有 node 节点部署docker引擎 四、部署 etcd 集群 4.1.…

【云计算小知识】云管理的作用是什么?

云计算已经成为推动企业数字化转型&#xff0c;提升运营效率的重要力量。而在这个过程中&#xff0c;云管理作为确保云计算环境稳定、高效运行的关键环节&#xff0c;其作用愈发凸显。今天我们小编就给大家详细介绍一下云管理的作用是什么&#xff1f; 云管理的作用是什么&…

找不到mfc140.dll是什么意思?四种高效率方法修复mfc140.dll文件

软件运行过程中的错误和问题偶尔会发生&#xff0c;这可能导致不便和工作效率的降低。其中一个常见的问题是“找不到 mfc140.dll”错误消息&#xff0c;这会阻止某些基于 Microsoft Visual Studio 2015 编写的应用程序运行。mfc140.dll 是一个重要的系统文件&#xff0c;今天我…

Whistle Web Debugging Proxy介绍及使用

大家好&#xff0c;今天继续给大家分享一款抓包工具&#xff0c;这款抓包工具是网页的形式&#xff0c;方便多人访问同时维护。Whistle Web Debugging Proxy是一个用于HTTP、HTTPS、WebSocket等网络协议的跨平台调试工具。它可以帮助开发者对网络请求进行捕捉、分析、修改和重定…

Spring Boot项目怎么集成Gitee登录

一、背景 现在的越来越多的项目&#xff0c;需要集成第三方系统进行登录。今天我们以Spring Boot项目集成Gitee为例&#xff0c;演示一下怎么使用Oauth2协议&#xff0c;集成第三方系统登录。 不了解oauth2的&#xff0c;可以看我之前的文章。Ouath2是怎么实现在第三方应用认…

Java入门基础学习笔记21——Scanner

在程序中接收用户通过键盘输入的数据&#xff1a; 需求&#xff1a; 请在程序中&#xff0c;提示用户通过键盘输入自己的姓名、年龄、并能在程序中收到这些信息&#xff0c;怎么解决&#xff1f; Java已经写好了实现程序&#xff0c;我们调用即可。 API&#xff1a;Applicat…

Linux---vim编辑器(续写)

5. vim正常模式命令集 插入模式 按「i」切换进入插入模式「insert mode」&#xff0c; 按“i”进入插入模式后是从光标当前位置开始输入文件&#xff1b; 按「a」进入插入模式后&#xff0c;是从目前光标所在位置的下一个位置开始输入文字&#xff1b; 按「o」进入插入模式…

APP未上架应用市场,微信商户如何快速开通APP支付

在移动互联网时代&#xff0c;APP作为企业服务用户的重要窗口&#xff0c;其支付功能的完善性直接关系到用户体验和企业的营收。然而&#xff0c;对于许多未上架应用市场的APP来说&#xff0c;如何快速开通微信APP支付功能成为了一个亟待解决的问题。本文将为您详细介绍在APP未…

MetaRTC-push推流客户端代码分析

本demo渲染使用opengl&#xff0c;音频采集使用alsa&#xff0c;视频采集使用v4l2/dev/video。 在设计多个平台时&#xff0c;MetaRTC的源码和google的c webrtc源码都使用了工厂模式的方法&#xff0c;比如以下不同平台的视频采集为例子。YangVideoCaptureLinux是实现linux平台…

将macOS系统安装到外置硬盘上教程

常常因为Mac昂贵的价格&#xff0c;我们会选择低容量的硬盘版本&#xff0c;造成很多大型游戏都安装不了的尴尬境地。今天&#xff0c;我们要探讨一个非常实用的话题&#xff1a;如何给你的Mac电脑扩容&#xff0c;通过将macOS系统安装到外置硬盘上。这对于希望提升存储空间但又…

基于GD32的简易数字示波器(5)- 软件_控制LED

这期记录的是项目实战&#xff0c;做一个简易的数字示波器。 教程来源于嘉立创&#xff0c;帖子主要做学习记录&#xff0c;方便以后查看。 本期主要介绍GPIO口的输入输出模式&#xff0c;使用其中的输出模式驱动LED。详细教程可观看下方链接。 2.2 LED控制实验 语雀 1、LE…

表征和基于结构的蛋白质工程:黄芪特异性皂苷乙酰转移酶-文献精读14

Characterization and structure-based protein engineering of a regiospecific saponin acetyltransferase from Astragalus membranaceus 表征和基于结构的蛋白质工程&#xff1a;黄芪特异性皂苷乙酰转移酶&#xff0c;一篇乙酰基转移酶文章精读分享~ 摘要 乙酰化有助于许…

一文入门DNS

概述 DNS是一个缩写&#xff0c;可以代表Domain Name System&#xff0c;域名系统&#xff0c;是互联网的一项基础服务。也可以代表Domain Name Server&#xff0c;域名服务器&#xff0c;是进行域名和与之相对应的IP地址相互转换的服务器。DNS协议则是用来将域名转换为IP地址…