ArkTS实现时钟的方式有哪些？

import { BusinessError } from '@ohos.base' 
import systemDateTime from '@ohos.systemDateTime'; 
 
@Entry 
@Component 
struct Index { 
  @State time: number = 0; 
  @State hours: number = 0; 
  @State minute: number = 0; 
  @State Seconds: number = 0; 
  timeId: number = -1; 
 
  onPageShow() { 
    try { 
      if (this.timeId != -1) { 
        console.log('当前Id为：' + this.timeId) 
        return 
      } 
      systemDateTime.getCurrentTime(false, (error: BusinessError, time: number) => { 
        if (error) { 
          console.info(`Failed to get currentTime. message: ${error.message}, code: ${error.code}`); 
          return; 
        } 
        console.info(`Succeeded in getting currentTime : ${time}`); 
        this.time = time; 
        //获取当前时间的小时，因为有8小时时间差，所以要加上 
        //使用 ~~ 和 Math.floor都可实现向下取整 
        this.hours = ((time + 3600 * 1000 * 8) / (3600 * 1000)) % 24 
        this.minute = ((time + 3600 * 1000 * 8) / (1000 * 60)) % 60 
        this.Seconds = Math.floor(((time + 3600 * 1000 * 8) / 1000) % 60) 
        console.info('hours is :' + this.hours) 
        console.info('minute is :' + this.minute) 
        console.info('Seconds is :' + this.Seconds) 
      }); 
    } catch (e) { 
      let error = e as BusinessError; 
      console.info(`Failed to get currentTime. message: ${error.message}, code: ${error.code}`); 
    } 
 
    //指针移动角度 
    this.timeId = setInterval(() => { 
      this.hours += (1 / 3600); //时针角度 
      this.minute += (1 / 60) //分针角度) 
      this.Seconds += 1; //秒针角度 
      console.info('当前秒数:' + this.Seconds) 
    }, 1000) 
  } 
 
  build() { 
    Row() { 
      Column({ space: 20 }) { 
        Text('获取的当前时间为:' + ~~(this.hours % 24) + ':' + ~~(this.minute % 60) + ':' + (this.Seconds % 60)) 
        //使用精灵图分别获取表盘、时针、分针、秒针 
        Stack() { 
          //表盘 
          Row() 
            .width('740px') 
            .height('710px') 
            .backgroundImage('comment/clock.png', ImageRepeat.NoRepeat) 
            .backgroundImageSize({ 
              width: '988px', 
              height: '800px' 
            }) 
            .backgroundImagePosition({ 
              x: '-190px', 
              y: '-64px' 
            }) 
 
          //时针 
          Row() 
            .width('40px') 
            .height('162px') 
            .backgroundImage('comment/clock.png', ImageRepeat.NoRepeat) 
            .backgroundImageSize({ 
              width: '988px', 
              height: '800px' 
            }) 
            .backgroundImagePosition({ 
              x: '-111px', 
              y: '-536px' 
            }) 
            .position({ 
              x: '350px', 
              y: '212px' 
            }) 
            .rotate({ 
              x: 0, 
              y: 0, 
              z: 1, 
              centerX: '50%', 
              centerY: '89%', 
              centerZ: 0, 
              angle: this.hours * 30 
            }) 
            .animation({ 
              duration: 1000, 
              iterations: 1, 
              curve: Curve.Linear 
            }) 
 
          //分针 
          Row() 
            .width('30px') 
            .height('216px') 
            .backgroundImage('comment/clock.png', ImageRepeat.NoRepeat) 
            .backgroundImageSize({ 
              width: '988px', 
              height: '800px' 
            }) 
            .backgroundImagePosition({ 
              x: '-70px', 
              y: '-480px' 
            }) 
            .position({ 
              x: '356px', 
              y: '156px' 
            }) 
            .rotate({ 
              x: 0, 
              y: 0, 
              z: 1, 
              centerX: '50%', 
              centerY: '94%', 
              centerZ: 0, 
              angle: this.minute * 6, //一分钟走6度 
            }) 
            .animation({ 
              duration: 1000, 
              iterations: 1, 
              curve: Curve.Linear 
            }) 
 
          //秒针 
          Row() 
            .width('36px') 
            .height('320px') 
            .backgroundImage('comment/clock.png', ImageRepeat.NoRepeat) 
            .backgroundImageSize({ 
              width: '988px', 
              height: '800px' 
            }) 
            .backgroundImagePosition({ 
              x: '-22px', 
              y: '-444px' 
            }) 
            .position({ 
              x: '352px', 
              y: '122px' 
            }) 
            .rotate({ 
              x: 0, 
              y: 0, 
              z: 1, 
              centerX: '50%', 
              centerY: '74%', 
              centerZ: 0, 
              angle: this.Seconds * 6 
            }) 
            .animation({ 
              duration: 1000, 
              iterations: 1, 
              curve: Curve.Linear 
            }) 
        } 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.