商标代理机构:开发一个时间小程序

admin 1个月前 (05-25) 科技 13 1

前言

跟异国他乡的同伙们微信谈天的时刻,经常面临时差的问题。我每次想要确定对方现在是几点,总是要口算一下,有时遗忘详细时差,或者涉及跨天,还得打开浏览器查一下,很不利便。有什么方式可以把同伙们所在都会的时间集中起来随时供自己查看呢?于是想到了微信小程序。找了找市面上的时间小程序,不是功效太杂就是小广告太多,不满意。

为什么不自己着手量身打造一个呢?

行动起来。

首先快速明确需求

很简朴:

  1. 需要展示时间的都会初定:加州、纽约,再加北京做对比
  2. 需要显示详细的时分秒,和年月日
  3. 需要实时转变
  4. 在其他国家也能准确展示时间

然后建立项目开撸

怎么建立和前期的准备就不在这里展开了,信赖不少人都熟悉。若是不熟悉小程序开发的可以参考官网 或者我的另一篇文章若何开发微信小程序
,上面有对若何开发小程序的简明扼要的的先容。

要害逻辑

这个小程序的焦点是时间的处置。若何获得其他区域的时刻信息?

这还不简朴?
先获取内陆时刻,然后加上或者减去另外一个地址与海内(北京时间)的时差(小时),最多再处置一下跨天的情形,不就获得其他地址的时刻了?

我一最先也是这么想的,做完以为还挺美,准备提交的时刻,突然意识到问题:我时差全是基于北京时间盘算的,换在其他国家接见,获取的内陆时间已经不是北京时间了,时差应该变才对,写死了时差可还行?!公布一个只能在海内使用的鸡肋时间工具,可不是我的气概!

捣鼓一阵,新方案出炉:

  1. 想办法获得零时区的时间
  2. 获取差别区域与零时区的时差(时区)
  3. 用零时区的时间加减与零时区的时差(时区),获得各地的绝对时间

1. 获得零时区的时间

零时区,也叫中时区,位于英国格林威治本初子午线上。该时区的地方时,叫做格林威治时间,也叫世界时。

我们不能直接获得格林威治时间,然则我们可以获得内陆与格林威治的时间差:

const diff = new Date().getTimezoneOffset() // 单元为分钟

然后凭据内陆时间和时间差获得格林威治时间:

const absTime = new Date().getTime() + diff * 60 * 1000;

2. 查询各地时区

格林威治本初子午线将地球划分为器械两个半球,格林威治本初子午线为零时区,往西依次为西一区到西十一区,往东依次为东一区到东十一区,西十二区和东十二区重合成为器械十二区,一共划分了24个时区,每个时区相差正好是1个小时。

北京是东八区,纽约是西五区,加州是西八区。

完整时区舆图:

3. 盘算各地的绝对时间

东时区的时刻比零时区快,西时区的时刻比零时区慢,以是东时区为正,西时区为负,所有时间盘算记得转换为毫秒。

let localTime = new Date(absTime + timeZone * 60 * 60 * 1000);

获取任何时区的绝对时间的完整焦点代码:

/**
 * timeZone: 东n区为正,西n区为负, 单元为小时
 */
const getFullTimeInfo = (timeZone, country, spliter) => {

  //获取内陆时间与格林威治时间的时间差(注重是分钟,记得转换)
  const diff = new Date().getTimezoneOffset();

  //凭据内陆时间和时间差获得格林威治时间
  const absTime = new Date().getTime() + diff * 60 * 1000;

  //凭据格林威治时间和各地时区,获得各地时区的时间
  let localTime = new Date(absTime + timeZone * 60 * 60 * 1000)

  return {
    time: formatTime(localTime, spliter)
  };
}

公布

很快,第一版就完成了。

刚最先这个样子略丑,有点裸奔的赶脚。不外第一版最主要是焦点功效,简陋的界面只是暂时的。

给当地的同伙磨练确定时间展示准确后,提交代码、提交审核,2天后收到审核通过的通知(吐槽腾讯的审核效率),然后在小程序管理平台点击公布,哦了。

扫描二维码,打开小程序,然后珍藏。以后要看时间了,微信主界面向下一拉,打开我的时间工具,一眼就看到想要知道的时间信息,确实比之前便捷多了。功效虽然简朴,界面虽然简陋,然则妥妥滴知足我的需求。

迭代

用了一阵子,以为样式啥的照样得厚实厚实,于是花了一些时间做了一次改版,实时时间以时钟效果展示,而且修改了结构,顺便重构了一下代码,便于新增区域。

嗯,效果似乎还行~

改BUG

前几天跟澳洲的同伙谈天,聊着聊着居然发现了我的程序的一个潜在BUG。

那天是4月4日的早晨(北京时间),我跟同伙吐槽我的一个疑惑:查询悉尼时区为东十区(即与北京相差2小时),然则为啥查询悉尼时间却与北京相差3小时(以是我那时程序中是把悉尼作为东十一区来盘算的)。同伙说:是的没错,我们这里现在在使用夏令时,等夏令时竣事就恢复2个小时时差了。然后一查,今年澳洲夏令时将在4月5号破晓3点竣事。。。

也就是说,距离这个BUG发作另有不到一天的时间。。。

马上打开电脑,改BUG。。。

凭据资料,获得美国和澳大利亚的夏令时规则:

  • 美国
    每年的3月第二个星期日02:00:00,时钟向前调整1小时,变为03:00:00,最先夏令时。
    每年的11月第一个星期日02:00:00,时钟向后调整1小时,变为01:00:00,竣事夏令时。

  • 澳大利亚
    每年的10月第一个星期日02:00:00,时钟向前调整1小时,变为03:00:00,最先夏令时。
    每年的4月第一个星期日03:00:00,时钟向后调整1小时,变为02:00:00,竣事夏令时。

关于夏令时,也挺有意思,有空我会另开一个篇幅来专门讲述。

将夏令时的判断逻辑加上:

/**
 * timeZone: 东n区为正,西n区为负, 单元为小时
 */
const getFullTimeInfo = (timeZone, country, spliter) => {

  //获取内陆时间与格林威治时间的时间差(注重是分钟,记得转换)
  const diff = new Date().getTimezoneOffset();

  //凭据内陆时间和时间差获得格林威治时间
  const absTime = new Date().getTime() + diff * 60 * 1000;

  //凭据格林威治时间和各地时区,获得各地时区的时间
  let localTime = new Date(absTime + timeZone * 60 * 60 * 1000)

+  // 思量夏令时
+  // judgeDST是我封装好的一个判断夏令时的方式
+  const isDST = judgeDST(localTime, country);
+  if (isDST) {
+    localTime = new Date(absTime + (timeZone + 1) * 60 * 60 * 1000)
+  }

  return {
    time: formatTime(localTime, spliter).split(':').slice(0,2).join(':'), 
    isDST
  };
}

有了现在的版本:

进入申博Sunbet官网  第1张

以后对这个小工具我还会不停优化,会越来越天真,好比支持区域选择,这样每个人都可以定制自己的时差表了。可以期待一下哦~

最后附上小程序二维码,扫一扫即可体验。

进入申博Sunbet官网  第2张

--
照样毛爷爷说得好:自己着手人给家足。

Happy coding


文章同时发表于民众号「前端手札」,喜欢的话可以关注一下哦。

进入申博Sunbet官网  第3张

本文作者:ChampYin
转载请注明出处:http://champyin.com/2020/04/08/开发一个时间小程序/

,

诚信在线

诚信在线www.goldo.cn用诚信赢得信任、用服务赢得口碑、用技术赢得赞赏。新的一年到来,诚信在线将一如既往地服务好每位客户。

申博声明:该文看法仅代表作者自己,与本平台无关。转载请注明:商标代理机构:开发一个时间小程序

网友评论

  • (*)

最新评论

  • 太阳城亚洲 2020-05-25 00:36:29 回复

    阳光在线:www.baolonglxg.com(原诚信在线)现已开放阳光在线手机版下载。阳光在线游戏公平、公开、公正,用实力赢取信誉。我感觉融为一体了

    1