Clock-IoT Studio(IoT Studio)-阿里云帮助中心

The clock component displays the current local time in your web application. This article describes how to configure the component.

Step 1: Add the component

Create a web application. For more information, see Create a web application.
In the web application editor, click the component icon on the far left.
Above the component list on the left side of the canvas, enter clock to find the component, and then drag it onto the canvas.

For more information about adding components, see Add a component.

For example, you can set the display format to date time, the background color to #FFFFFF, the font size to 12, the text color to #FFFFFF, and the border width to 0.

Step 2: Configure styles

In the style panel on the right, configure the component's display style.

Parameter	Description
display format	Select the time format for the clock component. Options include: date time: Displays the date and time, accurate to the second. Format: yyyy-MM-dd hh:mm:ss time: Displays only the time. Format: hh:mm:ss date: Displays only the date. Format: yyyy-MM-dd
text style	Set the font size (custom values are supported), color, and weight for the clock text. This property can be bound to a data source. For more information, see Text.
background color	Configure the background color and border for the clock. By default, the clock component has a background. To remove the background, set the background color opacity to 0. This property can be bound to a data source. For more information, see Rectangle.
border

Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 3: Configure interactions

InteractionOn the tab, configure events and actions. For details, see Interaction Configuration.
Refresh componentFor example, you can set a click event to trigger the action and update the content of another component.
Click Preview in the upper-right corner of the page to view and debug the component's data and style.