JavaScript中带日期的操作

news2024/11/15 13:49:08

当我们把日期转换为Number类型的时候,就会变成时间戳(毫秒)

const future = new Date(2037, 10, 19, 15, 23);
console.log(Number(future));
// console.log(+future); //与上行代码等效

在这里插入图片描述

● 所以我们就可以利用时间戳去做点东西,例如你的女朋友给你两个时间,一个时间是第一次约会的时间,第二个时间是第二次约会的时间,问你第一次约会和第二次约会间隔多少天?

const calcDaysPassed = (date1, date2) =>
  (date2 - date1) / (1000 * 60 * 60 * 24);

const day1 = calcDaysPassed(new Date(2037, 3, 4), new Date(2037, 3, 14));
console.log(day1);

在这里插入图片描述

但是为了防止出现负数,我们还是给加上绝对值

const calcDaysPassed = (date1, date2) =>  //定义一个函数,可以传两个参数
  Math.abs(date2 - date1) / (1000 * 60 * 60 * 24);  //用参数2减去参数1,然后取绝对值,最后转换为天数

const day1 = calcDaysPassed(new Date(2037, 3, 4), new Date(2037, 3, 14));  //传值
console.log(day1);  //打印

实例

现在我们将我们学习的知识加到我们实际的项目上去
在这里插入图片描述

之前我们制作好了这个时间,但是我们现在想时间如果这个时间是今天,就显示今天,不必显示详细时间,昨天显示昨天,类似这样

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);
  });
};

这个是我们之前的代码,现在我们将时间定义的拿走,不然我们没法直接定义

const formatMovementDate = function (date) {
  const calcDaysPassed = (date1, date2) =>
    Math.round(Math.abs(date2 - date1) / (1000 * 60 * 60 * 24));

  const daysPassed = calcDaysPassed(new Date(), date);

  if (daysPassed === 0) return '今天'; //如果天数等于0,那就输出今天
  if (daysPassed === 1) return '昨天'; //如果天数等于1,那就输出昨天
  if (daysPassed <= 7) return `${daysPassed} 天前`;//如果天数小于等于七天,那就输出几天内

  const day = `${date.getDate()}`.padStart(2, 0);  //如果上面都不匹配的话,我们直接输出真实的时间
  const month = `${date.getMonth() + 1}`.padStart(2, 0);
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
};

const displayMovements = function (acc, sort = false) {
  containerMovements.innerHTML = '';

  const movs = sort
    ? acc.movements.slice().sort((a, b) => a - b)
    : acc.movements;

  movs.forEach(function (mov, i) {
    const type = mov > 0 ? 'deposit' : 'withdrawal';
    const date = new Date(acc.movementsDates[i]);
    const displayDate = formatMovementDate(date);

    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);
  });
};

在这里插入图片描述

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

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

相关文章

Oceanbase 4.3特性解析:用物化视图来优化复杂查询

如果你是一位数据分析师&#xff0c;需要在包含数百万行数据的数据库中频繁地检索特定信息&#xff0c;而每次这样的查询都伴随着复杂的计算&#xff0c;耗费大量时间和资源。你可以考虑采用物化视图这一功能&#xff0c;提高查询效率。 物化视图是什么&#xff1f; 物化视图…

机器视觉中的打光技巧、选择光源的流程

目录 基本原则选择照明的考虑因素明场照明和暗场照明全明场照明&#xff08;漫射照明&#xff09;技术 特定光源1. 环形光源2. 条形光源3. 同轴光源3.1 何时使用同轴照明&#xff1f;3.2 何时不使用同轴照明&#xff1f; 4. 背光源5. 远心照明6. 点光源7. 穹顶光源8. 线光源9. …

玩转Matlab-Simscape(初级)- 05 - 基于Solidworks、Matlab Simulink、COMSOL的协同仿真(理论部分1)

** 玩转Matlab-Simscape&#xff08;初级&#xff09;- 05 - 基于Solidworks、Matlab Simulink、COMSOL的协同仿真&#xff08;理论部分1&#xff09; ** 目录 玩转Matlab-Simscape&#xff08;初级&#xff09;- 05 - 基于Solidworks、Matlab Simulink、COMSOL的协同仿真&am…

JavaScript引入方式

JS引入方式 1 内部脚本方式引入2 外部脚本方式引入 1 内部脚本方式引入 说明 在页面中,通过一对script标签引入JS代码script代码放置位置具备一定的随意性,一般放在head标签中居多 代码 <!DOCTYPE html> <html lang"en"><head><meta charset…

数据生命周期管理:从提取到治理再到安全保障的全面策略

在大数据的时代背景下&#xff0c;数据已经成为企业运营不可或缺的资源。然而&#xff0c;数据的管理并非易事&#xff0c;特别是在数据的整个生命周期中——从数据的提取、治理到安全保障&#xff0c;每一个环节都至关重要。本文将探讨如何制定一个全面的数据生命周期管理策略…

楼宇智慧公厕建设新方案-集成更简单!成本价更低!

在当今的大厦和写字楼中&#xff0c;公厕面临着诸多痛点。 办公楼公厕常常存在厕位难找的问题&#xff0c;使用者不得不花费时间逐一查看&#xff0c;导致效率低下&#xff1b;环境质量也令人担忧&#xff0c;异味、脏污等情况时有发生&#xff0c;影响使用者的心情和健康&…

计算机SCI期刊,中科院2区,IF=7.9,国产期刊,影响力高,口碑佳!

一、期刊名称 Digital Communications and Networks 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;计算机科学 影响因子&#xff1a;7.9 中科院分区&#xff1a;2区 出版方式&#xff1a;开放出版 版面费&#xff1a;无&#xff08;由重庆邮电大学支付…

基于SSM的“口腔护理网站”的设计与实现(源码+数据库+文档)

基于SSM的“口腔护理网站”的设计与实现&#xff08;源码数据库文档) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 首页 用户注册页面 医生信息查看模块 口腔护理预约模块 后台首页面…

【Redis】Redis键值存储

大家好&#xff0c;我是白晨&#xff0c;一个不是很能熬夜&#xff0c;但是也想日更的人。如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff0c;关注一下&#x1f440;白晨吧&#xff01;你的支持就是我最大的动力&#xff01;&#x1f4aa;&#x1f4aa;&#x1f4aa…

网络安全从业者“行话”

目录 ​编辑 一、攻击篇 1&#xff0e;攻击工具 2&#xff0e;攻击方法 3&#xff0e;攻击者 二、防守篇 1&#xff0e;软硬件 2&#xff0e;技术与服务 网络安全学习资源分享: 特别声明 一、攻击篇 1&#xff0e;攻击工具 肉鸡 所谓“肉鸡”是一种很形象的比喻&…

地平线旭日X3开发板基于MIPI Camera的目标检测 web 端展示调试记录

终于将MIPI Camera在web端显示出来了&#xff0c; 其实很简单的事情&#xff0c;但是因为一个网络的问题&#xff0c;自己研究了好几天&#xff0c; 查遍了论坛所有帖子&#xff0c;最后还是在地平线专家们的指导下&#xff0c;发现问题所在。 言归正传&#xff0c;将自己的…

python --Anaconda下载、安装

下载镜像 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/安装 等待安装完成&#xff0c;时间有点长&#xff0c;等了差不多5分钟左右。 验证conda是否安装成功 打开命令行窗口&#xff0c;输入conda --version 很遗憾&#xff0c;命令行回显是’conda’不是内部或…

Malbers Inventory System

Inventory插件为Malbers动物管理员生态系统带来了强大的库存系统&#xff0c;具有以下功能&#xff1a;通知系统、库存集、自定义物品反应等 ✔️特征 项目管理 收集和存储项目 库存显示 通知系统 物品所有者 库存集合 项目操作 保存和加载&#xff08;基于JSON.Net&#xff0c…

酒店刷脸设备遭批量扔进「垃圾桶」,为啥所有人都叫好……

最近&#xff0c;不知道柴油们有没有关注到这么一个热点&#xff0c;就是大量酒店曾经动辄几千上万买来的刷脸设备&#xff0c;大批量的被挂在二手平台1折甩卖了…… 昔日花大几千&#xff0c;甚至上万买来的设备&#xff0c;如今年低至三四百&#xff1f;打折打到脚底板&#…

AI图书推荐:使用FastAPI框架构建AI服务

《使用FastAPI构建生成式AI服务》&#xff08;Building Generative AI Services with FastAPI (Early Release) &#xff09;是一本由Ali Parandeh编写的书籍&#xff0c;计划于2025年3月首次出版&#xff0c;该书以实践为导向&#xff0c;指导读者如何开发具备丰富上下文信息的…

Rust Web开发框架actix-web入门案例

概述 在看书的时候&#xff0c;用到了actix-web这个框架的案例。 书里面的版本是1.0&#xff0c;但是我看官网最新都4.4了。 为了抹平这种信息差&#xff0c;所以我决定把官方提供的示例代码过一遍。 核心代码 Cargo.toml [package] name "hello" version &q…

(教程)gpt-4o如何使用,怎么体验?gpt-4o和gpt-4-turbo的区别

今天OpenAI发布了gpt-4o&#xff0c;我体验之后&#xff0c;gpt-4o简直逆天了。中文能力也挺别强。速度比现在的gpt4还要快。 早在 5 月 11 日&#xff0c;Sam 就在推文中表示&#xff1a;OpenAI 并没有推出 GPT-5&#xff0c;或搜索引擎&#xff0c;但团队一直在努力研发一些…

重启服务器后node节点显示NotReady

场景&#xff1a;夜间进行了断电维护&#xff0c;重启后发现业务无法使用&#xff0c;检查发现一个node节点显示NotReady. 去到目标服务器查看kubelet服务未成功启动 journalctl -u kubelet 执行journalctl -u kubelet 查看日志发现提示&#xff1a; ailed to run Kubelet: run…

IRENE:医学图像、文本、基因数据 + 多模态融合 + 疾病诊断模型

IRENE&#xff1a;医学图像、文本、基因数据 多模态融合 疾病诊断模型 多模态融合方法分析与分类1. 早期融合方法2. 晚期融合方法3. 混合融合方法 传统非统一的多模态融合方法的局限性IRENE 解法子解法1&#xff1a;多模态表征学习子解法2&#xff1a;双向多模态注意力机制IR…

AC/DC电源模块的故障诊断与维修技巧

BOSHIDA AC/DC电源模块的故障诊断与维修技巧 AC/DC电源模块是一种常用的电力转换设备&#xff0c;用于将交流电转换为直流电供给电子设备。然而&#xff0c;由于使用环境和操作不当等原因&#xff0c;电源模块可能会出现故障。本文将介绍AC/DC电源模块的故障诊断与维修技巧。…