当前位置: 首页 > 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;二…...

Java 自然排序和比较器排序区别?Comparable接口和Comparator比较器区别?

注&#xff1a;如果你对排序不理解&#xff0c;请您耐心看完&#xff0c;你一定会明白的。文章通俗易懂。建议用idea运行一下案例。 1&#xff09;自然排序和比较器排序的区别&#xff1f; 自然排序是对象本身定义的排序规则&#xff0c;由对象实现 Comparable 接口&#xff…...

【CV】opencv调用DIS/LK等计算光流,前一帧和当前帧写反了有什么影响?

当在计算光流时&#xff0c;将前一帧和当前帧输入反了&#xff0c;会导致一系列问题。 在计算光流时&#xff0c;通常是将前一帧作为模板&#xff0c;根据当前帧计算光流。因为光流是描述相邻帧之间像素移动的一种方法&#xff0c;它通过比较两帧之间的像素强度或特征点的移动…...

C语言学习细节|C语言面向对象编程!函数指针如何正确使用

文章目录 1.函数指针定义2.格式3.应用回调函数动态函数调用函数的间接调用 4.结构体与函数指针结合 1.函数指针定义 函数指针就是一个指向函数的指针变量&#xff0c;与指向数据的指针不同&#xff0c;函数指针保存的是函数的地址&#xff0c;这使得程序可以动态地调用不同的函…...

C语言简要(一)

总得让她开心吧 helloworld #include <stdio.h>int main() {printf("hello world!\n");return 0; } 程序框架 #include <stdio.h> int main {return 0; }输出 printf("hello world!\n"); "里面的内容叫做“字符串”&#xff0c;prin…...

那些年我与c++的叫板(一)--string类自实现

引子&#xff1a;我们学习了c中的string类&#xff0c;那我们能不能像以前数据结构一样自己实现string类呢&#xff1f;以下是cplusplus下的string类&#xff0c;我们参考参考&#xff01; 废话不多说&#xff0c;直接代码实现&#xff1a;&#xff08;注意函数之间的复用&…...

二刷算法训练营Day08 | 字符串(1/2)

今日任务&#xff1a; 344.反转字符串 541. 反转字符串II卡码网&#xff1a;54.替换数字 151.翻转字符串里的单词卡码网&#xff1a;55.右旋转字符串 详细布置&#xff1a; 1. 344. 反转字符串 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 …...

使用高防IP是应对网络安全的重要措施

使用高防IP&#xff08;High Defense IP&#xff09;在现代网络环境中显得尤为重要&#xff0c;这主要源于以下几个方面的原因&#xff1a; 一、网络安全形势严峻 随着互联网的快速发展&#xff0c;网络安全问题日益突出。各种网络攻击手段层出不穷&#xff0c;如分布式拒绝服…...

代码随想录-算法训练营day40【动态规划03:整数拆分、不同的二叉搜索树】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第九章 动态规划part03● 343.整数拆分 ● 096.不同的二叉搜索树 详细布置 今天两题都挺有难度&#xff0c;建议大家思考一下没思路&#xff0c;直接看题解&#xff0c;第一次做&#xff0c;硬想很难想出来。343. 整数…...

MySQL数据库中基本数据管理操作

使用SQL语句实现基本数据管理操作——即DML语句 1.添加数据 insert into 表名&#xff08;字段名称&#xff0c;字段名称&#xff0c;字段名称&#xff09;values&#xff08;数据&#xff0c;数据&#xff0c;数据&#xff09; 在MySQL数据库中&#xff0c;除了数字&#x…...

记录一下Hql遇到的零碎问题

建表相关 -- 地区维度表 drop table dim_province_full; create table dim_province_full( id string comment 编号, name string comment 省份名称, region_id string comment 大区id, area_code string comment 行政区位码, iso_code string comment 国际编码, iso_3166_2 s…...