前端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…...

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

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

【设计模式】JAVA Design Patterns——Commander(指挥官模式)
🔍目的 用于处理执行分布式事务时可能遇到的所有问题。 🔍解释 处理分布式事务很棘手,但如果我们不仔细处理,可能会带来不想要的后果。假设我们有一个电子商务网站,它有一个支付微服务和一个运输微服务。如果当前运输…...

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

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

【传知代码】基于图神经网络的知识追踪方法(论文复现)
前言:本文将深入探讨基于图神经网络的知识追踪方法,旨在通过构建知识图谱来捕捉知识之间的复杂关联,并利用图神经网络强大的表示学习能力来建模学生的学习过程。我们将首先介绍图神经网络的基本原理和关键技术,然后详细阐述如何将…...
Vue与React、Angular的比较
Vue、React和Angular是前端开发中三个流行的JavaScript框架,它们各自具有不同的特点、优势和适用场景。以下是对这三个框架的比较: 1. 基本概念 Vue:Vue是一套用于构建用户界面的渐进式框架,其核心库专注于视图层,易…...
LINQ(二) —— 流式语句
总目录 C# 语法总目录 LINQ 二 —— 流式语句 1.1 序列相关部分运算符1.2 查询相关部分运算符 1.1 序列相关部分运算符 Take 运算符:Take 是拿出序列的几个数 Skip 运算符:Skip 是跳过序列的前几个数 Reverse 运算符:Reverse 是将序列反转 …...
怎么查看MySQL服务的最大连接,已经使用的连接数?怎么配置最大连接数?
要查看和配置MySQL服务的最大连接数以及已经使用的最大连接数,可以使用以下SQL语句和步骤: 查看MySQL服务的最大连接数和已经使用的最大连接数 查看当前最大连接数: SHOW VARIABLES LIKE max_connections;查看已经使用的最大连接数ÿ…...

微信小程序毕业设计-跑腿系统项目开发实战(附源码+演示视频+LW)
大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:微信小程序毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计…...

stm32通过esp8266连接阿里云平台代码讲解
连接服务器 首先,按照一定的规则,获取连接阿里服务器所需要的ClientID(客户端D)、Username(用户名)、Passward(密码),ServerIP(域名),ServerPort(…...

突发!某大厂机房掉电,MySQL数据库无法启动,紧急恢复过程...
作者:IT邦德 中国DBA联盟(ACDU)成员,10余年DBA工作经验, Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主,全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复, 安装迁移,性能优化、故障…...

SpringCloudAlibaba:6.2RocketMQ的普通消息的使用
简介 普通消息也叫并发消息,是发送效率最高,使用最多的一种 依赖 <?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 :点击趋势图中的某一点或是柱状图,出现弹窗,并传输数据
样式 在趋势图中点击某一个柱状图,出现下面的弹窗 代码实现 主要是在趋势图页面代码中,在初始化趋势图的设置中,添加对趋势图监听的点击方法 drawChart() {const chartData this.chartData;let option {};if (!chartData.xData?.len…...

2024年上半年软考什么时候查成绩?附查询流程
考试一旦结束,并不意味着与考试相关的事情也就结束了。2024年上半年信息系统项目管理师等软考考试结束后,我们还需要关注考后和证书相关的事情,比如成绩查询、证书领取等等。 2024年上半年软考成绩查询 查询时间:预计在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网络 一、基本架构 各个箭头的解释: conv 3 * 3, ReLU:表示通过一个3 * 3的卷积层,并且该层自动附带一个非线性激活层(ReLu)copy and crop:表示进行裁剪然后再进行拼接(在channel的维度上…...

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

【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...

微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...

centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...

聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...

论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...

Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...