当前位置: 首页 > news >正文

国际化日期(inti)

我们可以使用国际化API自动的格式化数字或者日期,并且格式化日期或数字的时候是按照各个国家的习惯来进行格式化的,非常的简单;

const now = new Date();
labelDate.textContent = new Intl.DateTimeFormat('zh-CN').format(now);

在这里插入图片描述

比如说这是按照中国的习惯来进行格式化,我们习惯按照年月日时分秒来排列时间

● 但是这样格式化的话只能出现年月日,时间却没有了

const now = new Date();
const options = {hour: 'numeric',minute: 'numeric',day: 'numeric',month: 'numeric',year: 'numeric',weekday: 'long',
};
labelDate.textContent = new Intl.DateTimeFormat('zh-CN', options).format(now);

在这里插入图片描述

● 我们也可以直在浏览器中自动的获取你的地区,无需手动的去指定地区

const now = new Date();
const options = {hour: 'numeric',minute: 'numeric',day: 'numeric',month: 'numeric',year: 'numeric',weekday: 'long',
};const lacale = navigator.language;
console.log(lacale);labelDate.textContent = new Intl.DateTimeFormat(lacale, options).format(now);

在这里插入图片描述

● 再次回到我们的应用程序,我们给每个用户中定义了国家码,要实现每个人登录按照他国家的习惯来显示时间
在这里插入图片描述

const now = new Date();
const options = {hour: 'numeric',minute: 'numeric',day: 'numeric',month: 'numeric',year: 'numeric',
};
labelDate.textContent = new Intl.DateTimeFormat(currentAccount.locale,options
).format(now);

在这里插入图片描述
在这里插入图片描述

● 除了这些,存取款的时间也需要根据用户国家改变

const formatMovementDate = function (date, locale) {const calcDaysPassed = (date1, date2) =>Math.round(Math.abs(date2 - date1) / (1000 * 60 * 60 * 24));const daysPassed = calcDaysPassed(new Date(), date);if (daysPassed === 0) return '今天';if (daysPassed === 1) return '昨天';if (daysPassed <= 7) return `${daysPassed} 天前`;return new Intl.DateTimeFormat(locale).format(date);// 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, acc.locale);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);});
};

在这里插入图片描述

大家也可以根据下面的文档详细的学习这个国际化API
INIT

相关文章:

国际化日期(inti)

我们可以使用国际化API自动的格式化数字或者日期&#xff0c;并且格式化日期或数字的时候是按照各个国家的习惯来进行格式化的&#xff0c;非常的简单&#xff1b; const now new Date(); labelDate.textContent new Intl.DateTimeFormat(zh-CN).format(now);比如说这是按照…...

【论文阅读笔记】jTrans(ISSTA 22)

个人博客地址 [ISSTA 22] jTrans&#xff08;个人阅读笔记&#xff09; 论文&#xff1a;《jTrans: Jump-Aware Transformer for Binary Code Similarity》 仓库&#xff1a;https://github.com/vul337/jTrans 提出的问题 二进制代码相似性检测&#xff08;BCSD&#xff0…...

单位个人如何向期刊投稿发表文章?

在单位担任信息宣传员一职以来,我深感肩上的责任重大。每月的对外信息宣传投稿不仅是工作的核心,更是衡量我们部门成效的重要指标。起初,我满腔热血,以为只要勤勉努力,将精心撰写的稿件投至各大报社、报纸期刊的官方邮箱,就能顺利登上版面,赢得读者的青睐。然而,现实远比理想骨…...

Redis数据结构-RedisObject

1.7 Redis数据结构-RedisObject Redis中的任意数据类型的键和值都会被封装为一个RedisObject&#xff0c;也叫做Redis对象&#xff0c;源码如下&#xff1a; 1、什么是redisObject&#xff1a; 从Redis的使用者的角度来看&#xff0c;⼀个Redis节点包含多个database&#xff…...

Vue 中使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解

网上很多都是不完整的&#xff0c;我这里发布一个完整的 - 8.64e7 表示可选择当天时间&#xff08;注&#xff1a;小于当前时间&#xff0c;- 8.64e7 则是禁用日期不包含当前日&#xff0c;若大于当前日期&#xff0c; 8.64e7 则是禁用日期包含当前日&#xff09; time.getTi…...

系列介绍:《创意代码:Processing艺术编程之旅》

系列介绍&#xff1a;《创意代码&#xff1a;Processing艺术编程之旅》 标题创意&#xff1a; “代码绘梦&#xff1a;Processing艺术编程入门”“数字画布&#xff1a;用Processing创造视觉奇迹”“编程美学&#xff1a;Processing艺术创作指南”“创意编程&#xff1a;Proc…...

深度学习设计模式之抽象工厂模式

文章目录 前言一、介绍二、详细分析1.核心组成2.实现步骤3.代码示例4.优缺点优点缺点 5.使用场景 总结 前言 本文主要学习抽象工厂模式&#xff0c;抽象工厂模式创建的是对象家族&#xff0c;比如&#xff1a;苹果是一个产品&#xff0c;但是他不单单只生产手机&#xff0c;还…...

K8s是什么?

url address K8s是一个开源的容器编排平台&#xff0c;可以自动化&#xff0c;在部署&#xff0c;管理和扩展容器化应用过程中涉及的许多手动操作。 Kubernetes最初是由Google工程师作为Borg项目开发和设计的&#xff0c;后于2015年捐赠给云原生计算基金会&#xff08;CNCF&a…...

【网站项目】SpringBoot796水产养殖系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

Vue详细介绍

Vue.js&#xff08;通常简称为Vue&#xff09;是一个用于构建用户界面的渐进式JavaScript框架。它由尤雨溪&#xff08;Evan You&#xff09;创建&#xff0c;并于2014年首次发布。Vue的设计目的是易于上手&#xff0c;同时也能够强大到驱动复杂的单页应用&#xff08;SPA&…...

声纹识别的对抗与防御

随着机器学习理论和方法的发展, 出现了用于模仿特定说话人语音的深度伪造、针对语音识别和声纹识别的对抗样本, 它们都为破坏语音载体的可信性和安全性提供了具体手段, 进而对各自应用场景的信息安全构成了挑战。 深度伪造是利用生成式对抗网络等方法, 通过构建特定的模型, 产生…...

C++ QT设计模式总结

Ciallo&#xff5e;(∠・ω< )⌒★&#xff0c;这里是 Eureka&#xff0c;欢迎来看我的设计模式总结&#xff0c;有问题随时可以告诉我~ 面向对象的设计模式&#xff1a; 以下总结了面向对象的设计模式&#xff0c; QT 的源码在哪里体现了这些模式&#xff0c;以及如何在 …...

洛谷 P3203:弹飞绵羊 ← 分块算法(单点更新、单点查询)

【题目来源】https://www.acwing.com/problem/content/2168/https://www.luogu.com.cn/problem/P3203【题目描述】 某天&#xff0c;Lostmonkey 发明了一种超级弹力装置&#xff0c;为了在他的绵羊朋友面前显摆&#xff0c;他邀请小绵羊一起玩个游戏。 游戏一开始&#xff0c;L…...

程序验证之Dafny--证明霍尔逻辑的半自动化利器

一、What is Dafny?【来自官网介绍 Dafny 】 1)介绍 Dafny 是一种支持验证的编程语言&#xff0c;配备了一个静态程序验证器。 通过将复杂的自动推理与熟悉的编程习语和工具相结合&#xff0c;使开发者能够编写可证明正确的代码&#xff08;相对于 {P}&#xff33;{Q} 这种…...

Flutter 中的 SafeArea 小部件:全面指南

Flutter 中的 SafeArea 小部件&#xff1a;全面指南 在移动应用开发中&#xff0c;处理设备屏幕的边缘是一个常见的挑战&#xff0c;尤其是考虑到现代设备通常具有不同的屏幕形状&#xff0c;如刘海屏、曲面屏等。为了确保应用内容不会覆盖这些屏幕区域&#xff0c;Flutter 提…...

webpack生成模块关系依赖图示例:查看构建产物的组成部分 依赖关系图

npm i -D webpack-bundle-analyzer core-js babel-loaderwebpack.config.js const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin; module.exports {entry: ./src/index.js,output: {filename: main.js,},// mode: production, // 或者 produ…...

Spacy的安装与使用教程

官网安装指导教程 https://spacy.io/usage 安装指令 需要根据自己系统的cuda版本选择 nvcc -V pip install -U pip setuptools wheel pip install -U spacy[cuda12x] python -m spacy download zh_core_web_sm python -m spacy download en_core_web_sm...

Pathlib,一个不怕迷路的 Python 向导

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;关注我&#xff0c;收看每期的编程干货。 一个简单的库&#xff0c;也许能够开启我们的智慧之门&#xff0c; 一个普通的方法&#xff0c;也许能在危急时刻挽救我们于水深火热&#xff0c; 一个新颖的思维方式&#xff0c;也许能…...

详解绝对路径和相对路径的区别

绝对路径和相对路径是用于描述文件或目录在文件系统中位置的两种不同方式。 绝对路径&#xff08;Absolute Path&#xff09;是从文件系统的根目录开始的完整路径&#xff0c;可以唯一地确定一个文件或目录的位置。在不同的操作系统中&#xff0c;根目录的表示方式可能略有不同…...

C++二叉搜索树搜索二叉树二叉排序树

C二叉搜索树 1. 二叉搜索树的概念 二叉搜索树&#xff08;BST,Binary Search Tree)&#xff0c;也称为二叉排序树或二叉查找树。它与一般二叉树的区别在于&#xff1a;每个结点必须满足“左孩子大于自己&#xff0c;右孩子小于自己”的规则。在这种规则的约束下&#xff0c;二…...

Ubuntu系统磁盘管理

要在Ubuntu系统中开机自动挂载AWS EBS卷&#xff08;设备名为/dev/xvdd&#xff09;&#xff0c;需通过**/etc/fstab文件**配置自动挂载规则。以下是完整步骤&#xff08;含前提条件、命令和验证&#xff09;&#xff1a; 一、前提条件 确认磁盘状态&#xff1a;/dev/xvdd需已…...

丹青识画部署教程:Nginx反向代理+HTTPS保障书法API安全

丹青识画部署教程&#xff1a;Nginx反向代理HTTPS保障书法API安全 1. 引言&#xff1a;当AI艺术遇见生产环境 想象一下&#xff0c;你开发了一个能看懂画作、还能用行草书法题跋的AI应用。它优雅、智能&#xff0c;充满了东方美学韵味。但当你准备把它开放给更多人使用时&…...

仿真:H无穷鲁棒控制与for loop shaping在永磁同步电机伺服位置控制中的应用 - ...

仿真-H无穷鲁棒控制_for loop shaping-永磁同步电机伺服位置控制仿真:验证设计流程&#xff0c;送鲁棒控制设计资料包永磁同步电机的伺服位置控制总让人又爱又恨。这玩意儿响应快、精度高&#xff0c;但参数敏感得像刚恋爱的小姑娘。传统PID搞不定的时候&#xff0c;试试H无穷鲁…...

Phi-4-mini-reasoning实操手册:vLLM日志分析与常见加载失败排障指南

Phi-4-mini-reasoning实操手册&#xff1a;vLLM日志分析与常见加载失败排障指南 1. 模型简介 Phi-4-mini-reasoning是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族的一员&#xff0c;它经过专门微调以提升数学…...

Graph Node高级配置:环境变量与配置文件详解

Graph Node高级配置&#xff1a;环境变量与配置文件详解 【免费下载链接】graph-node Graph Node indexes data from blockchains such as Ethereum and serves it over GraphQL 项目地址: https://gitcode.com/gh_mirrors/gr/graph-node Graph Node 作为区块链数据索引…...

【手把手教学】Tesseract-OCR图片文字识别从安装到实战

1. Tesseract-OCR简介与安装准备 第一次接触图片文字识别技术时&#xff0c;我和很多人一样觉得这是个遥不可及的黑科技。直到发现了Tesseract-OCR这个开源工具&#xff0c;才发现原来OCR技术可以如此亲民。Tesseract最初由HP实验室开发&#xff0c;后来由Google接手维护&#…...

nfc-list使用教程

nfc-list 是 Kali Linux 中基于 libnfc 库&#xff08;开源 NFC 开发框架&#xff09;的基础 NFC/RFID 设备检测工具&#xff0c;核心功能是扫描并列出当前连接的 NFC 读卡器设备&#xff0c;以及贴近读卡器的 NFC 卡片&#xff08;或标签&#xff09;的详细信息&#xff0c;包…...

JPom结合Docker实现SpringBoot项目自动化构建与部署实战

1. 为什么你需要JPomDocker自动化部署方案 每次手动打包SpringBoot项目时&#xff0c;你是不是也经历过这样的痛苦&#xff1f;先在本地mvn clean package&#xff0c;然后scp上传到服务器&#xff0c;接着ssh连上去kill旧进程&#xff0c;最后nohup启动新jar包。更可怕的是半夜…...

AI内容创作自动化了99%,为什么每天还是要手动7-8小时?因为大多数人把“判断层”彻底想反了

你有没有这种感觉&#xff1f;刷到一条深度视频——量子力学、斯多葛、佛学、红楼梦、AI前沿全混在一起讲得头头是道&#xff0c;弹幕刷屏“这是AI写的吧&#xff1f;” 结果博主本人站出来说&#xff1a;我已经败给AI了&#xff0c;我服了。 粉丝以为这是全AI流水线&#xff0…...

QWEN-AUDIO声波可视化效果展示:CSS3动态波形+玻璃拟态UI交互截图

QWEN-AUDIO声波可视化效果展示&#xff1a;CSS3动态波形玻璃拟态UI交互截图 基于通义千问 Qwen3-Audio 架构构建的新一代语音合成系统&#xff0c;集成情感指令微调与声波可视化交互&#xff0c;致力于提供具有"人类温度"的超自然语音体验。 1. 视觉交互效果全景展示…...