Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use progress and meter controls in HTML5". In daily operation, I believe many people have doubts about how to use progress and meter controls in HTML5. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use progress and meter controls in HTML5". Next, please follow the editor to study!

In HTML5, progress and meter controls have been added. The progress control is a progress bar control, which can indicate the progress of tasks, such as the progress of scenarios such as software installation and file replication in the Windows system. The meter control is a metering bar control, which represents some kind of measurement, which is suitable for the quantitative performance of temperature, weight, amount and so on.

Progress bar

Description: indicates the progress of tasks, such as the progress of scenarios such as software installation and file replication in the Windows system.

Characteristics

Syntax:

50%

Attributes:

Max {number}: sets or gets the maximum value of the progress bar.

Default: when this property is not set, the maximum value of the control is 1.

Value {number}: sets or gets the current value of the progress bar.

Default value: when this value is not set, the progress bar is "uncertain" and there is no specific progress information; when there is no max attribute (the default maximum of the progress bar is 1), the default value range of value is 0.01-1.0, and 0.2 indicates 20% progress. Minimum browser version support: IE 10, Chrome 8

Control content: when the browser does not support this control, the contents of the control will be displayed, and browsers that support this control will not display the contents of the control.

Example 1: contains the value attribute

Progress: 25%

Example 2: contains the max attribute

Progress: 25%

Example 3: uncertain progress bar (no value attribute)

Progress: downloading.

IE8: displays the text content.

IE11: displays an animation from left to right.

Chrome: displays an animation from left to right and then from right to left.

Metering strip

Description: indicates some kind of measurement, which is suitable for the quantitative performance of temperature, weight, amount, etc. Characteristics

Syntax:

Progress:

Attributes:

Value {number}: sets or gets the value of this control, which must be halfway between the min and max values.

Max {number}: sets the maximum value for this control.

Default: when this property is not set, the maximum value of the control is 1.

Min {number}: sets the minimum value for this control.

Default: when this property is not set, the minimum value of the control is 0.

Low {number}: sets a threshold that is too low when value is less than low and greater than min.

High {number}: sets an excessively high threshold to display an overly high color when value is greater than high and smaller than max.

Optimum {number}: set the best value

Minimum browser version support: not supported by IE, Chrome 8

Control content: when the browser does not support this control, the contents of the control will be displayed, and browsers that support this control will not display the contents of the control.

Example 1: no attribute

Progress:

Sample 2:value

< max(max默认为1.0) 进度： 示例3：value = max(max默认为1.0) 进度： 示例4：value >

Max (max defaults to 1.0)

Progress:

Sample 5:value

< min(min默认为0) 进度： 示例6：value = min(min默认为0) 进度： 示例7：value >

Min (min defaults to 0)

Progress:

Sample 8:value

< high 进度： 示例9：value = high 进度： 示例10：value >

High

Progress:

Sample 11:value

< low 进度： 示例12：value = low 进度： 示例13：value >

Low

Progress:

Example 14:optimum < low < value < high

Progress:

Example 15:low < optimum = value < high

Progress:

Example 16:low < value < high < optimum

Progress:

Example 17:value < low < high < optimum

Progress:

Example 18:optimum < low < high < value

Progress:

At this point, the study on "how to use progress and meter controls in HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.