1# TextTimer 2 3The **\<TextTimer>** component displays timing information and is controlled in text format. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11Not supported 12 13## APIs 14 15TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController }) 16 17**Parameters** 18 19| Name | Type | Mandatory | Description | 20| ----------- | -------- | -------- | -------- | 21| isCountDown | boolean | No | Whether to count down.<br>Default value: **false**| 22| count | number | No | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**. The maximum value is 86400000 ms (24 hours). In the case of 0 < Value of **count** < 86400000, the value of **count** is used as the initial countdown value. In other cases, the default value is used as the initial countdown value.<br>Default value: **60000**| 23| controller | [TextTimerController](#texttimercontroller) | No | **\<TextTimer>** controller.| 24 25## Attributes 26 27| Name | Type | Description | 28| -------- | ---------------------- | ---------------------- | 29| format | string | Custom format. The value must contain at least one of the following keywords: **HH**, **mm**, **ss**, and **SS**. If the specified date format is yy, MM, or dd, the default value is used instead.<br>Default value: **'HH:mm:ss.SS'**| 30 31## Events 32 33| Name | Description | 34| ---------------------------------------- | ---------------------------------------- | 35| onTimer(event: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes.<br>**utc**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.<br>**elapsedTime**: elapsed time of the timer, in milliseconds.| 36 37## TextTimerController 38 39Implements the controller for controlling the **\<TextTimer>** component. A **\<TextTimer>** component can be bound to only one controller. 40 41### Objects to Import 42 43``` 44textTimerController: TextTimerController = new TextTimerController() 45 46``` 47 48### start 49 50start() 51 52Starts the timer. 53 54### pause 55 56pause() 57 58Pauses the timer. 59 60### reset 61 62reset() 63 64Resets the timer. 65 66## Example 67 68```ts 69// xxx.ets 70@Entry 71@Component 72struct TextTimerExample { 73 textTimerController: TextTimerController = new TextTimerController() 74 @State format: string = 'mm:ss.SS' 75 76 build() { 77 Column() { 78 TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController }) 79 .format(this.format) 80 .fontColor(Color.Black) 81 .fontSize(50) 82 .onTimer((utc: number, elapsedTime: number) => { 83 console.info('textTimer notCountDown utc is: ' + utc + ', elapsedTime: ' + elapsedTime) 84 }) 85 Row() { 86 Button("start").onClick(() => { 87 this.textTimerController.start() 88 }) 89 Button("pause").onClick(() => { 90 this.textTimerController.pause() 91 }) 92 Button("reset").onClick(() => { 93 this.textTimerController.reset() 94 }) 95 } 96 } 97 } 98} 99``` 100 101 102 103
