** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
Add a stack container to the root component. The sample code is as follows:
```
```
**style="transform: rotate\(\{\{ second \* 6 \}\}deg\)** sets the rotation event of a component. **transform** translates, rotates, or scales an image. **rotate** rotates an image. You can set an image to rotate around its x-axis or y-axis.
Set attributes, such as the height, width, and position, of the stack component in the CSS file. The sample code is as follows:
```
.stack {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
```
Set attributes, such as the height and width, of the clock-bg component in the CSS file. The sample code is as follows:
```
.clock-bg {
width: 80%;
height: 80%;
object-fit: scale-down;
}
```
Set attributes, such as the height and width of the hour, minute, and second hands, of the clock-hand component in the CSS file. The sample code is as follows:
```
.clock-hand {
width: 25%;
height: 65%;
object-fit: contain;
}
```
Add a timer in the **index.js** file to update the hour, minute, and second variables in real time so that the time can be automatically updated on the app UI. The sample code is as follows:
```
export default {
timer: undefined,
// Define parameters.
data: {
hour: 0, // Define hours.
minute: 0, // Define minutes.
second: 0 // Define seconds.
},
onInit () {
this.updateTime();
this.timer = setInterval(this.updateTime, 1000)// Set the timer to 1 second.
},
updateTime: function () {
var nowTime = new Date()
this.hour = nowTime.getHours()
this.minute = nowTime.getMinutes()
this.second = nowTime.getSeconds()
if (this.hour < 10) {
this.hour = '0' + this.hour
}
if (this.minute < 10) {
this.minute = '0' + this.minute
}
if (this.second < 10) {
this.second = '0' + this.second
}
},
}
```
3. Display the current time in numerals under the analog clock. Add the text component at the end of the root layout. The following example shows the UI structure:
```
{{ hour }}:{{ minute }}:{{ second }}
```
class=**"digit-clock"** sets the height, width, and font size of the component. The sample code is as follows:
```
.digit-clock {
font-size: 58px;
width: 100%;
margin-top: 0px;
text-align: center;
}
```
4. Set the style, animation effect, and dynamic data binding for all components. The complete sample code is as follows:
- **index.hml**
```
{{ hour }}:{{ minute }}:{{ second }}
```
- **index.css**
```
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.stack {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.digit-clock {
font-size: 58px;
width: 100%;
margin-top: 0px;
text-align: center;
}
.clock-bg {
width: 80%;
height: 80%;
object-fit: scale-down;
}
.clock-hand {
width: 25%;
height: 65%;
object-fit: contain;
}
```
- **index.js**
A **.js** file is used to implement logic interactions of the clock app. The following **.js** file implements the function of periodically obtaining the system time.
```
export default {
timer: undefined,
data: {
hour: 0,
minute: 0,
second: 0
},
onInit() {
this.updateTime()
this.timer = setInterval(this.updateTime, 1000)
},
updateTime: function () {
var nowTime = new Date()
this.hour = nowTime.getHours()
this.minute = nowTime.getMinutes()
this.second = nowTime.getSeconds()
if (this.hour < 10) {
this.hour = '0' + this.hour
}
if (this.minute < 10) {
this.minute = '0' + this.minute
}
if (this.second < 10) {
this.second = '0' + this.second
}
},
onDestroy() {
clearInterval(this.timer);
}
}
```
## Signing and Packaging
After finishing writing the app code, you need to sign and package the app before running it on a real device. For details, see [Signing and Packaging Guide](../../application-dev/quick-start/configuring-openharmony-app-signature.md).
## Running on the Real Device
Before you install the app and run it on the development board, install the DevEco Device Tool by following operations provided in [HUAWEI DevEco Device Tool User Guide](https://device.harmonyos.com/en/docs/ide/user-guides/service_introduction-0000001050166905). Burn OpenHarmony into the development board, and run it on the board. For details about how to build, burn, and run an image, see . After the image is running normally and the system is started properly, perform the following steps to install or uninstall the app:
1. Obtain the HDC client from the following path:
```
developtools/hdc_standard/prebuilt/windows/hdc_std.exe
```
Change the HDC client name to **hdc.exe** and add the path above to the system environment variable **path**.
2. Open the **cmd** window, and run the following commands to push the HAP file to the device directory, and install it:
```
hdc install clock.hap
```
3. Run the following command to start the app. **ohos.samples.clock** indicates the app package name, and **MainAbility** indicates the ability started by the app.
```
hdc shell aa start -d 123 -a ohos.samples.clock.MainAbility -b ohos.samples.clock
```
4. \(Optional\) Run the following command to uninstall the app. **ohos.samples.clock** indicates the app package name.
```
hdc shell bm uninstall -n ohos.samples.clock
```
## FAQs
### hdc\_std Fails to Connect to a Device
- **Symptom**
**\[Empty\]** is displayed in the output after the **hdc\_std list targets** command is run.
- **Possible Causes and Solutions**
1. The device fails to be identified.
Check whether **HDC Device** exists in the universal serial bus device of the device manager. If **HDC Device** does not exist, the device cannot be connected. In this case, remove and then insert the device or burn the latest image for the device.
2. hdc\_std works improperly.
Run the **hdc kill** or **hdc start -r** command to kill or restart the HDC service, and then run the **hdc list targets** command to check whether device information is obtained.
3. hdc\_std does not match the device.
If the latest image is burnt for the device, hdc\_std must also be of the latest version. As hdc\_std is updated continuously, obtain hdc\_std of the latest version from the **developtools\_hdc\_standard** repository in the **prebuilt** directory.
### hdc\_std Fails to Run
- **Symptom**
The **hdc\_std.exe** file does not run after being clicked.
- **Possible Causes and Solutions**
**hdc\_std.exe** requires no installation and can be directly used on a disk. It can also be added to environment variables. Open the **cmd** window and run the **hdc\_std** command to use **hdc\_std.exe**.