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

前端JS必用工具【js-tool-big-box】学习,获取全球重点城市时间

我们去住一些旅馆的时候,或者一些国际性网站,经常可以看见他们的钟表会展示一些国家地区的时间,这个就是很常用的功能。但如果不常接触这个功能的开发网站呢,大家就看自己电脑右下角的时间展示,就是自己当前的具体时间了。

js-tool-big-box也增加了这个功能,希望有需求的开发者可以通过工具,获取全球一些重点城市的时间展示。

目录

1 安装引入

2 获取重点城市时间展示 

2.1 比较重点的城市

2.2 获取方法

2.3 返回数据展示

2.4 使用方法总结

3 开发者反馈


1 安装引入

执行npm命令

npm i js-tool-big-box

项目中引入timeBox对象,获取全球重点城市的时间方法,位于这个对象内:

import { timeBox } from 'js-tool-big-box';

2 获取重点城市时间展示 

2.1 比较重点的城市

目前入选的重点城市有,北京、雅加达、伦敦、纽约、巴黎、悉尼和东京,我们将通过工具方法,获取当前这7个重点城市的具体时间。为了更迎合需求,我们只展示了时分秒。

2.2 获取方法

timeBox 对象中,我们添加了getWorldTime 这个方法,用来获取详细时间

const worldTime = timeBox.getWorldTime();
console.log('=-==-=', worldTime);

2.3 返回数据展示

 

2.4 使用方法总结

 

方法名返回值入参

getWorldTime

目前7个重点城市的hour min sec值;

如果你需要按时钟效果展示,需要自行将内容嵌套到setInterval定时任务中去

 

3 开发者反馈

希望使用本工具的小伙伴们,如果在工作中,遇到一些公共方法,一些多次使用的,可以及时告诉我,不比在自己项目多次重复开发了。

近期有小伙伴说,获取法定节假日只有2024年的,希望添加往年的,这个思路就挺好的,因为这个工具希望让大家真实觉得方便,那效果就达到了。

希望有一天,大家在前端项目中,更少的去写一些公共方法,更少的去install一些第三方工具库,把更多的时间利用到业务开发中去,那就太好了。

而且我们利用csdn博客来写这个学习文档,也是想借助平台更好的反馈能力,我们一起加油吧!

相关文章:

前端JS必用工具【js-tool-big-box】学习,获取全球重点城市时间

我们去住一些旅馆的时候,或者一些国际性网站,经常可以看见他们的钟表会展示一些国家地区的时间,这个就是很常用的功能。但如果不常接触这个功能的开发网站呢,大家就看自己电脑右下角的时间展示,就是自己当前的具体时间…...

BioTech - 将蛋白质的 PDB 格式文件 转换成 mmCIF 格式文件 (Python)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/139234247 蛋白质的三维结构信息通常可以通过两种格式的文件来获取:PDB (Protein Data Bank) 和 mmCIF (Macromolecular Crystallographic Information File…...

【编程题-错题集】奇数位丢弃(模拟 - 规律)

牛客对应题目链接&#xff1a;奇数位丢弃_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 通过⼀两个例子的模拟&#xff0c;可以发现&#xff1a;每次起始删除的下标都是 2 的次方。根据这个规律&#xff0c;找到最后⼀次删除的起始位置的下标即可。 二、代码 #include <io…...

Docker安装MongoDB(Linux版)

文章目录 前言一、Docker环境的准备1.安装依赖2.安装Docker 二、使用Docker安装MongoDB1.mongo版本选取2.拉取合适的镜像3.宿主机创建MongoDB需要挂载的文件夹4.第一次无认证创建mongo用户5.启动需要认证的mongo容器 问题汇总总结 前言 本文章主要介绍在Centos系统&#xff0c…...

【设计模式】JAVA Design Patterns——Commander(指挥官模式)

&#x1f50d;目的 用于处理执行分布式事务时可能遇到的所有问题。 &#x1f50d;解释 处理分布式事务很棘手&#xff0c;但如果我们不仔细处理&#xff0c;可能会带来不想要的后果。假设我们有一个电子商务网站&#xff0c;它有一个支付微服务和一个运输微服务。如果当前运输…...

解决vue3项目vite打包忽略.vue扩展名

项目打包时报could not relolve “...”&#xff0c;因为vite已不再默认忽略.vue扩展名。 解决方法如下&#xff1a; 在vite.config.js中配置vite使其忽略 .vue 扩展名&#xff08;不建议忽略&#xff09; 注意&#xff1a;即使忽略了.vue文件&#xff0c;在实际写的时候也要加…...

Vue基础(数据绑定、export使用)

1、简介 在使用vue开发的过程中&#xff0c;经常会遇到一些容易混淆的问题&#xff0c;因此&#xff0c;在本文中进行汇总操作&#xff0c;只有通过不断总结学习&#xff0c;才能更好掌握vue的使用&#xff08;每天进步一点&#xff09;。 2、数据绑定 在js中定义数据&#xf…...

【传知代码】基于图神经网络的知识追踪方法(论文复现)

前言&#xff1a;本文将深入探讨基于图神经网络的知识追踪方法&#xff0c;旨在通过构建知识图谱来捕捉知识之间的复杂关联&#xff0c;并利用图神经网络强大的表示学习能力来建模学生的学习过程。我们将首先介绍图神经网络的基本原理和关键技术&#xff0c;然后详细阐述如何将…...

Vue与React、Angular的比较

Vue、React和Angular是前端开发中三个流行的JavaScript框架&#xff0c;它们各自具有不同的特点、优势和适用场景。以下是对这三个框架的比较&#xff1a; 1. 基本概念 Vue&#xff1a;Vue是一套用于构建用户界面的渐进式框架&#xff0c;其核心库专注于视图层&#xff0c;易…...

LINQ(二) —— 流式语句

总目录 C# 语法总目录 LINQ 二 —— 流式语句 1.1 序列相关部分运算符1.2 查询相关部分运算符 1.1 序列相关部分运算符 Take 运算符&#xff1a;Take 是拿出序列的几个数 Skip 运算符&#xff1a;Skip 是跳过序列的前几个数 Reverse 运算符&#xff1a;Reverse 是将序列反转 …...

怎么查看MySQL服务的最大连接,已经使用的连接数?怎么配置最大连接数?

要查看和配置MySQL服务的最大连接数以及已经使用的最大连接数&#xff0c;可以使用以下SQL语句和步骤&#xff1a; 查看MySQL服务的最大连接数和已经使用的最大连接数 查看当前最大连接数&#xff1a; SHOW VARIABLES LIKE max_connections;查看已经使用的最大连接数&#xff…...

微信小程序毕业设计-跑腿系统项目开发实战(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…...

stm32通过esp8266连接阿里云平台代码讲解

连接服务器 首先&#xff0c;按照一定的规则&#xff0c;获取连接阿里服务器所需要的ClientID&#xff08;客户端D&#xff09;、Username&#xff08;用户名&#xff09;、Passward(密码)&#xff0c;ServerIP&#xff08;域名&#xff09;&#xff0c;ServerPort&#xff08…...

突发!某大厂机房掉电,MySQL数据库无法启动,紧急恢复过程...

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…...

SpringCloudAlibaba:6.2RocketMQ的普通消息的使用

简介 普通消息也叫并发消息&#xff0c;是发送效率最高&#xff0c;使用最多的一种 依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSch…...

vue+echart :点击趋势图中的某一点或是柱状图,出现弹窗,并传输数据

样式 在趋势图中点击某一个柱状图&#xff0c;出现下面的弹窗 代码实现 主要是在趋势图页面代码中&#xff0c;在初始化趋势图的设置中&#xff0c;添加对趋势图监听的点击方法 drawChart() {const chartData this.chartData;let option {};if (!chartData.xData?.len…...

2024年上半年软考什么时候查成绩?附查询流程

考试一旦结束&#xff0c;并不意味着与考试相关的事情也就结束了。2024年上半年信息系统项目管理师等软考考试结束后&#xff0c;我们还需要关注考后和证书相关的事情&#xff0c;比如成绩查询、证书领取等等。 2024年上半年软考成绩查询 查询时间&#xff1a;预计在2024年7月…...

css3实现0.5px边框

效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>css3实现0.5px边框</title><s…...

U-Net网络

U-Net网络 一、基本架构 各个箭头的解释&#xff1a; conv 3 * 3, ReLU&#xff1a;表示通过一个3 * 3的卷积层&#xff0c;并且该层自动附带一个非线性激活层&#xff08;ReLu&#xff09;copy and crop&#xff1a;表示进行裁剪然后再进行拼接&#xff08;在channel的维度上…...

不拍视频,不直播怎么在视频号卖货赚钱?开一个它就好了!

大家好&#xff0c;我是电商糖果 视频号这两年看着抖音卖货的热度越来越高&#xff0c;也想挤进电商圈。 于是它模仿抖音推出了自己的电商平台——视频号小店。 只要商家入驻视频号小店&#xff0c;就可以在视频号售卖商品。 具体怎么操作呢&#xff0c;需要拍视频&#xf…...

8051开发中禁用自动代码分区的实践指南

1. 禁用自动代码分区的技术背景在8051架构的嵌入式开发中&#xff0c;代码分区&#xff08;Bank Switching&#xff09;是一种扩展程序存储器空间的常用技术。传统8051芯片的寻址空间有限&#xff0c;通过分区切换机制可以将代码分布到不同的物理存储区域。Keil C51开发工具链默…...

AI司法应用中的算法公平性:从数据偏见到保护属性选择的技术实践

1. 项目概述&#xff1a;当算法开始“断案”&#xff0c;公平性成了第一道坎最近几年&#xff0c;AI系统在司法领域的渗透速度远超很多人的想象。从辅助量刑建议、评估再犯风险&#xff0c;到自动化审阅海量卷宗&#xff0c;算法正试图将法官和检察官从繁重的重复性劳动中解放出…...

AI社交对话设计:如何避免商业场景中的期望违背与尴尬感

1. 项目概述&#xff1a;当AI的“聪明”变成商业场景的“尴尬”最近几年&#xff0c;AI驱动的社交对话机器人&#xff0c;从智能客服到虚拟销售助理&#xff0c;几乎成了商业互动的标配。我们总在谈论它们如何提升效率、降低成本、提供7x24小时服务。但作为一名在数字化营销和客…...

CI/CD最佳实践:构建高效可靠的持续集成和部署流程

CI/CD最佳实践&#xff1a;构建高效可靠的持续集成和部署流程 一、CI/CD最佳实践概述 1.1 CI/CD最佳实践的定义 CI/CD最佳实践是指在持续集成和持续部署过程中遵循的一系列指导原则和方法。它通过自动化、标准化和可重复的流程&#xff0c;提高软件开发和部署的效率和可靠性。 …...

Mythos架构解析:大模型的可编程推理能力与Gated Release机制

1. 项目概述&#xff1a;一次被刻意“锁住”的能力跃迁如果你最近关注大模型前沿动态&#xff0c;大概率在技术社区、AI从业者群或邮件列表里见过“TAI #200”这个编号——它不是某篇论文的DOI&#xff0c;也不是某个开源项目的Release Tag&#xff0c;而是The AI Alignment Ne…...

【收藏 2026 版】程序员零基础转 AI 应用赛道!不用深耕算法训练,靠现有编程功底轻松转行

当下 AI 技术全面普及&#xff0c;传统开发岗位竞争日趋激烈&#xff0c;不少程序员都想顺势切入人工智能领域。很多人觉得入行 AI 就得钻研复杂算法、上手大模型训练&#xff0c;门槛高到难以触碰。实则 2026 年 AI 应用开发门槛大幅降低&#xff0c;拥有基础编程能力&#xf…...

UABEA跨平台Unity资源编辑器:安全修改AssetBundle实战指南

1. 这不是又一个AssetBundle查看器&#xff0c;而是Unity资源编辑的“手术刀”你有没有在调试一个Unity游戏时&#xff0c;突然发现某个UI按钮的贴图颜色不对&#xff0c;或者NPC对话框的字体大小被改得离谱&#xff0c;但手头只有打包后的APK或EXE文件&#xff1f;更糟的是&am…...

FastGithub终极指南:3步解决GitHub访问卡顿,让开发效率提升5倍

FastGithub终极指南&#xff1a;3步解决GitHub访问卡顿&#xff0c;让开发效率提升5倍 【免费下载链接】FastGithub github定制版的dns服务&#xff0c;解析访问github最快的ip 项目地址: https://gitcode.com/gh_mirrors/fa/FastGithub 你是否曾经因为GitHub访问缓慢而…...

一句指令就能完成跨系统操作?——2026企业级智能体技术路径深度拆解

站在2026年的时间节点回望&#xff0c;企业数字化转型已从“流程驱动”全面转向“智能体驱动”。过去&#xff0c;跨系统操作往往意味着繁杂的API对接或编写脆弱的自动化脚本。而今&#xff0c;以实在智能推出的实在Agent为代表的方案&#xff0c;实现了“一句指令&#xff0c;…...

GQA:多查少算的 Attention 头组合

本文基于昇腾CANN和昇腾NPU&#xff0c;围绕 ops-transformer 仓库的相关技术展开。 MHA&#xff08;Multi-Head Attention&#xff09;每个 Head 一套 QKV——8 个 Head 就是 8 组。MQA 省过头了——8 个 Head 共享 K、V。GQA&#xff08;Grouped Query Attention&#xff09;…...