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

RL训练像点外卖?ProRL底层逻辑拆解(非常详细),从入门到精通看这篇!

一句话讲清楚&#x1f449;&#x1f3fb; NVIDIA提出ProRL Agent&#xff0c;把多轮LLM Agent的RL训练中「轨迹生成&#xff08;Rollout&#xff09;」这一步从训练框架中彻底剥离出来&#xff0c;变成一个独立的HTTP服务&#xff0c;训练侧只需发HTTP请求就能拿到轨迹和奖励信…...

PCK文件解析与资源提取全指南:从基础到高级的游戏资源逆向工程实践

PCK文件解析与资源提取全指南&#xff1a;从基础到高级的游戏资源逆向工程实践 【免费下载链接】godot-unpacker godot .pck unpacker 项目地址: https://gitcode.com/gh_mirrors/go/godot-unpacker 在游戏开发与学习过程中&#xff0c;我们经常需要分析游戏资源文件以理…...

Go语言的命令行工具:从flag到cobra

Go语言的命令行工具&#xff1a;从flag到cobra 1. 引言 命令行工具是软件开发中不可或缺的一部分&#xff0c;它们可以帮助我们自动化任务、管理系统、处理数据等。Go语言以其简洁的语法和强大的标准库&#xff0c;成为了开发命令行工具的理想选择。从基础的flag包到高级的co…...

UIO与CCP917T驱动开发实战

1、UIO基础2、UIO和CCP917T结合3、和内核驱动结合...

闲置U盘秒变神器!Windows 11密码重置盘制作保姆级教程(含32/64位系统差异说明)

闲置U盘秒变系统急救神器&#xff1a;Windows 11密码重置盘全流程精解 那个抽屉角落积灰的旧U盘&#xff0c;可能比你想象中更有价值。当Windows 11的登录界面无情拒绝你输入的密码时&#xff0c;一个预先制作的密码重置盘就是打开数字大门的备用钥匙。不同于网上流传的简易教程…...

构建高性能WebSocket聊天应用:libwebsockets实战指南

构建高性能WebSocket聊天应用&#xff1a;libwebsockets实战指南 【免费下载链接】libwebsockets canonical libwebsockets.org networking library 项目地址: https://gitcode.com/gh_mirrors/li/libwebsockets Libwebsockets是一个简单易用、MIT许可证、纯C语言编写的…...

[Python3高阶编程] - 阅读 Gunicorn 源代码前的准备工作

1. Gunicorn 官方代码仓库 Gunicorn 的官方 Git 仓库托管在 GitHub 上&#xff1a; GitHub 地址: https://github.com/benoitc/gunicorn 克隆代码: # 克隆主仓库 git clone https://github.com/benoitc/gunicorn.git# 或者使用 SSH git clone gitgithub.com:benoitc/gunico…...

【27】软考软件设计师——数据流图(DFD)补全题满分精讲|下午15分大题深度拆解

摘要:本文是《软件设计师50讲通关|从零基础到工程师职称》专栏第27篇,深度精讲下午案例题第1道必考大题:数据流图(DFD)补全,该题单题分值高达12 ~ 15分,是整张试卷最稳的保底得分大题。我结合多年备考复盘与真题阅卷规则,超详细拆解DFD四大核心元素标准定义、机考绘图…...

用快马快速构建战网更新睡眠模式诊断工具原型

最近在帮朋友排查战网(Battle.net)客户端更新卡顿的问题时&#xff0c;发现"更新服务进入了睡眠模式"这个提示特别常见。作为开发者&#xff0c;如果能快速验证各种修复方案的有效性&#xff0c;会大大提升排查效率。今天就用InsCode(快马)平台来快速搭建一个诊断工具…...

多平台音乐资源统一接口:从开发痛点到解决方案

多平台音乐资源统一接口&#xff1a;从开发痛点到解决方案 【免费下载链接】listen1-api One API for all free music in China 项目地址: https://gitcode.com/gh_mirrors/li/listen1-api 1. 跨平台资源整合的行业痛点 音乐应用开发面临着三大核心挑战&#xff0c;这些…...