开发一个时间小程序

前言

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

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

行动起来。

首先快速明确需求

很简单:

  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天后收到审核通过的通知(吐槽腾讯的审核效率

(0)

相关推荐

  • 划分属于你的时区

    昨天说起伦敦,它曾是世界的中心,而世界时间的基准线--本初子午线,便位于伦敦郊区的格林威治.登上格林威治天文台,靠近天文观测仪,拿出手机,显示0度的经线,体会到科技发展魅力的同时,对时间会有更深刻的认 ...

  • 彻底弄懂GMT、UTC、时区和夏令时

    前言 格林威治时间.世界时.祖鲁时间.GMT.UTC.跨时区.夏令时,这些眼花缭乱的时间术语,我们可能都不陌生,但是真正遇到问题,可能又不那么确定,不得不再去查一查,处理完可能过段时间又忘记.今天,我 ...

  • 如何在代码中处理时间

    在国际化应用中,对日期/时间的处理远比你想象中的更难,特别是当涉及到时区的时候.为什么会这么难?我们该如何解决它?请听我为你一一解析.几乎所有的系统都离不开"时间"的概念,以至于大 ...

  • 时差的具体由来,时差由纬度还是经度决定?

    时差是由经度决定的.经度不同,地方时不同:同一经度的地方时相同:东边经度比西边经度的地方时早.经度每相差1°时间就相差4分钟,每相差15度时间就相差1小时. 时差的具体由来 我们对时间的度量是人为制定 ...

  • 听众问答 44:那些坑使我选择了开发一个微信小程序

    比科学故事更重要的 是科学精神 汪诘 科学有故事 我的听众应该都已经知道了,科学有故事的第一个视频版专辑已经正式上线了.做了一轮宣传后,就有很多听众来问我,你们为啥要用微信小程序发布视频节目呢?为什么 ...

  • 又一个阿里小程序闯关微信! “淘宝特价版 1688”双线反攻,社交流量大挪移!

    淘宝特价版先打通了内贸B2B平台1688,然后正式申请微信小程序 作者| 林岳中 编辑| 大 成 "十万火急"!全市场都在焦急等待! 距离阿里巴巴向微信申请开通淘宝特价版小程序,至 ...

  • 石桥码农:如何在本地基于 nideshop 架设一个微信小程序商城?

    目录 一.首先架构服务器端 二.创建数据库 三.尝试运行后端代码 四.配置数据库连接,与初始化数据 五.小程序这一端,下载.导入.运行 六.问题 架设完成后,产品相貌大概长这个样子: 是仿网易严选的小 ...

  • 手把手教你从0开始搭建一个答题小程序 附源码!

    酷酷说钱 每天教你一个赚钱方法. 小程序是2018年的风口,今天教大家从0搭建一个小程序,废话不多说. 按照下面的教程一步一步操作即可搭建好,如果你还是不会,文末会分享大家视频教程 和 小程序源码. ...

  • 开发分销商城小程序有什么价值?

    作为国内最大的移动平台,微信拥有庞大的用户群,如此庞大的用户量使许多公司越来越意识到开发微信的重要性.如今,微信公众号商城.小程序商城以微信平台的发展为基础,为企业带来更多流量. 开发分销商城小程序有 ...

  • 微信小游戏:独立开发者开发的魔性小程序-浮洛皮骑士!还不错

    50000+游戏爱好者已加入我们! 每天推荐好玩游戏! 关注我们,沐沐带你发现好游戏! <浮洛皮骑士>游戏小程序好玩吗? <浮洛皮骑士>小游戏怎么玩? 怎么进入<浮洛皮骑 ...

  • 只需七步,用Excel做一个抽奖小程序!

    话不多说,直接开始! 第一步:先把要设置的奖品打出来,如图所示,奖名称可别打错了哦! 第二步:全选"数据",选择"插入",选择"饼图",生成 ...

  • 只需七步, 用Excel做一个抽奖小程序!

    话不多说,直接开始! 第一步:先把要设置的奖品打出来,如图所示,奖名称可别打错了哦! 点击加载图片 第二步:全选"数据",选择"插入",选择"饼图&q ...

  • 开发农业商城小程序有什么用处?

    如今农业发展一直是在线下发展,渠道单一,如果开发小程序则能够实现线上线下的交互,通过小程序整合农业种植户.批发商.零售商.买方等资源,使农业种植户能够迅速获得收益.下面给大家介绍一下,开发农业商城小程 ...