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?: TextTimerOptions) 16 17**Parameters** 18 19| Name| Type| Mandatory| Description| 20| -------- | -------- | -------- | -------- | 21| options | [TextTimerOptions](#texttimeroptions)| No| Parameters of the **\<TextTimer>** component.| 22 23## TextTimerOptions 24 25| Name | Type | Mandatory | Description | 26| ----------- | -------- | -------- | -------- | 27| isCountDown | boolean | No | Whether to count down.<br>Default value: **false**| 28| 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**| 29| controller | [TextTimerController](#texttimercontroller) | No | **\<TextTimer>** controller.| 30 31## Attributes 32 33Among the [universal attributes](ts-universal-attributes-size.md) and [universal text attributes](ts-universal-attributes-text-style.md), **fontColor**, **fontSize**, **fontStyle**, **fontWeight**, and **fontFamily** are supported. In addition, the following attributes are supported. 34 35| Name | Type | Description | 36| -------- | ---------------------- | ---------------------- | 37| 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'**| 38 39## Events 40 41| Name | Description | 42| ---------------------------------------- | ---------------------------------------- | 43| onTimer(event: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes.<br>**utc**: Linux timestamp, which is the amount of time that has elapsed since January 1, 1970, in the minimum unit of the format.<br>**elapsedTime**: elapsed time of the timer, in the minimum unit of the format.<br> **NOTE**<br>This event is not triggered when the screen is locked or the application is running in the background.| 44 45## TextTimerController 46 47Implements the controller for controlling the **\<TextTimer>** component. A **\<TextTimer>** component can be bound to only one controller. 48 49### Objects to Import 50 51``` 52textTimerController: TextTimerController = new TextTimerController() 53 54``` 55 56### start 57 58start() 59 60Starts the timer. 61 62### pause 63 64pause() 65 66Pauses the timer. 67 68### reset 69 70reset() 71 72Resets the timer. 73 74## Example 75 76```ts 77// xxx.ets 78@Entry 79@Component 80struct TextTimerExample { 81 textTimerController: TextTimerController = new TextTimerController() 82 @State format: string = 'mm:ss.SS' 83 84 build() { 85 Column() { 86 TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController }) 87 .format(this.format) 88 .fontColor(Color.Black) 89 .fontSize(50) 90 .onTimer((utc: number, elapsedTime: number) => { 91 console.info('textTimer notCountDown utc is: ' + utc + ', elapsedTime: ' + elapsedTime) 92 }) 93 Row() { 94 Button("start").onClick(() => { 95 this.textTimerController.start() 96 }) 97 Button("pause").onClick(() => { 98 this.textTimerController.pause() 99 }) 100 Button("reset").onClick(() => { 101 this.textTimerController.reset() 102 }) 103 } 104 } 105 } 106} 107``` 108 109 110 111
