Implementing a Countdown Element in a Quick App
Tags: javascript, huawei
Published: 2022-04-10 22:14:36

##What Is a Countdown Element
The countdown element is used to display the remaining time for a promotion activity and will send a notification when such time ends. This element supports:

- Time setting by day, hour, minute, and second
- Configuration of text, border, and delimiter styles
- Time delay
- Callback event for countdown ending

As shown in the following figure, the layout of the element consists of numbers and delimiters. Generally, the numbers indicate the remaining time by day, hour, minute, and second. The delimiters are used to separate numbers. Common delimiters can be words (day, hour, minute, and second) and colon (:).

![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvivhltr5vnfp04tauzc.png)

```
<import name="countdown" src="../Countdown/countdown"></import>
<template>
  <div class="container">
    <text>General usage</text>
    <div class="example-body">
      <countdown class="countdown" day="{{this.day}}" hour="{{this.hour}}" minute="{{this.minute}}" second="{{this.second}}" splitor-color="#007AFF" border-width="{{3}}" border-style="dotted" border-color="#007AFF"></countdown>
    </div>
  </div>
</template>
```

##Implementation Steps
###Customizing Subelements
The countdown UI can be used universally, while the layout of its content may vary and therefore cannot be hardcoded. Otherwise, once any part of the content UI is changed, the subelements will also need to be modified, which violates the principle of open-source programming.

Therefore, multiple style attributes are supported in countdown.ux for you to customize the style of subelements.

![Image descption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20pdyj8d6nt6zxqcvttn.png)

###Designing the Attributes and Supported Event of Subelements

![Image descriptin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwp1t0fud6qgbuozr0zz.png)


###Designing the Overall Layout

- The text element is used to design the layout of the delimiters and numbers, as displayed in Figure 1 below.

- Define the related attributes in props of the subelements and pass the values when the parent element references the subelements. Call this.$watch(‘day’, ‘changeFlag’) to listen to the changes of the values and then update and process the values in the subelements, as displayed in Figure 2 below.

- Implement the countdown algorithm. You need to convert days, hours, and minutes to seconds, set the timer to decrease by 1 every second, and reconvert the seconds back into days, hours, minutes, and seconds accordingly, as shown in Figure 3 and 4 below.


![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbywovduh8xfcwgmhuqa.png)
Figure 1


![Image descripti](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpc5ww9hany8limqve7b.png)
Figure 2a

![Imae description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1n36t9pmjegh0vf5tp7f.png)
Figure 2b

![Image descaription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7puyd2qztyn9fkn3ul4.png)
Figure 3

![Figure 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv94fe9v39pdlbn1i7py.png)
Figure 4

- Define the timeup callback event in the parent element, and implement and bind the event, as displayed in Figure 5.

- Trigger the timeup event of the parent element in the subelements, as displayed in Figure 6.

![Image descriptioan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfsg3jot19izbekdt7eo.png)
Figure 5a

![Image_ description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7by0zxi83islh10mszwk.png)
Figure 5b

![Image dscription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j89riuhzxfz70cb2cg8o.png)
Figure 6

##Summary
In this tutorial, you have learned how to:

- Design subelements, including their attributes and supported events.
- Implement data communication between the parent element and subelements.
- Convert days, hours, minutes, and seconds, and set a timer.
- Configure the style of the element.

##Reference
[Quick app official document](https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-animation-styles-0000001123530340)