实现世界时钟鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例通过app.json5中bundleName里的城市名称，匹配对应城市时区，并把对应时间显示在时钟界面。

实现世界时钟源码链接

效果预览

使用说明

进入应用后，直接显示伦敦（UTC+0）、北京（UTC+8）的时间，并将两点在圆圈的相对位置表示出来，中间展示中国标准时间，即北京时间。

实现思路

构造城市时区映射数据表

创建一个名为TIMEZONE_MAP的哈希映表（HashMap）。用于存储城市与其对应时区的映射关系。
TIMEZONE_MAP是一个键值对组合，其中key时城市名称，value是这些城市所属的时区ID。

export const TIMEZONE_MAP = new HashMap<string, string>();

TIMEZONE_MAP.set('beijing', 'Asia/Shanghai');
TIMEZONE_MAP.set('london', 'Europe/London');

实现世界时钟

1. 构造时区点的数据结构TimezonePoint，设置向上中心点坐标、外圆坐标、文本坐标。

class TimezonePoint {
  city1?: Resource;
  city2?: Resource;
  timezoneNum?: string;
  point_x: number = 0
  point_y: number = 0
  out_circle_x: number = 0
  out_circle_y: number = 0
  text_x: number = 0
  text1_y: number = 0
  text2_y: number = 0
}

2. 使用Circle()函数，画出世界时钟的形状。

Circle()
  .position({ x: px2vp(this.point.point_x), y: px2vp(this.point.point_y) })
  .width(6)
  .height(6)
  .fill(this.point.timezoneNum ? $r('app.color.start_window_background') : $r('app.color.border_color'))
  .fillOpacity(this.point.timezoneNum ? 1 : 0.3)

3. 构造timezoneCircle()函数，根据获取的圆中心点坐标、中心点坐标等参数，实现时区圆。

timezoneCircle() {
  let mDisplay = display.getDefaultDisplaySync();
  this.rad = px2vp(mDisplay.width) * 0.75;

  let interval = setInterval(() => {
    let modePosition: componentUtils.ComponentInfo = componentUtils.getRectangleById("circle");

    }, 100)
}

4. 构造getUtcTime()函数，调用getTime()获取UTC的时间。

getUtcTime() {
  let currentDate = new Date();
  return currentDate.getTime() + currentDate.getTimezoneOffset() * 60 * 1000
}

5. 构造getDateStr()函数，调用getFullYear()/getMonth()/getDate()获取年、月、日数据。

getDateStr(date: Date): string {
  let year = date.getFullYear().toString();
  let month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth().toString();
  let day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString();
  return year + month + day;
}

6. 构造compareCityTimezone()函数，比较两个时区的时间差值，返回两个时区所差的小时数。

compareCityTimezone() {
  let offset1 = this.timezone1!.getOffset();
  let offset2 = this.timezone2!.getOffset()
  if (offset1 > offset2) {
    this.compareTimezone = 1
  } else if (offset1 < offset2) {
    this.compareTimezone = -1
  }
  this.diffHours = Math.abs(offset1 - offset2) / 60 / 60 / 1000
}

7. 构造compareCityDate()函数，比较两个时区的时间差值，返回两个时区的天数区别。

compareCityDate() {
  let date1Num = parseInt(this.getDateStr(this.city1Date))
  let date2Num = parseInt(this.getDateStr(this.city2Date))
  if (date1Num == date2Num) {
    this.city2TimeDesc = $r('app.string.today')
  } else if (date1Num > date2Num) {
    this.city2TimeDesc = $r('app.string.yesterday')
  } else {
    this.city2TimeDesc = $r('app.string.tomorrow')
  }
}