CN114489901A

CN114489901A - Timing progress display method, device, equipment and storage medium

Info

Publication number: CN114489901A
Application number: CN202210088641.1A
Authority: CN
Inventors: 丁贤磊
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2022-01-25
Filing date: 2022-01-25
Publication date: 2022-05-13

Abstract

The disclosure provides a timing progress display method, a timing progress display device and a storage medium, and relates to the technical field of computers, in particular to the field of computer display. The specific implementation scheme is as follows: setting a regional container; setting a background element and a timing progress element in the regional container; and controlling the timing progress element to rotate according to a set angle and a set time so as to display the timing progress element from the background element. According to the embodiment of the disclosure, in the regional container, the timing progress element is controlled to rotate according to the set angle and the set time, so that the timing progress element is exposed from the background element, and a dynamic timing effect is realized.

Description

Timing progress display method, device, equipment and storage medium

Technical Field

The present disclosure relates to the field of computer technology, and more particularly, to the field of computer display.

Background

In the display interface, it is sometimes necessary to display the progress of the countdown. The countdown progress bar may be obtained by some drawing tools, such as Canvas drawing. In Canvas, a timer may be used to draw an arc in segments, and finally a complete circle is drawn, ending timing.

Disclosure of Invention

The disclosure provides a timing progress display method, a timing progress display device and a storage medium.

According to an aspect of the present disclosure, there is provided a timing progress display method including:

setting a regional container;

setting a background element and a timing progress element in the regional container;

and controlling the timing progress element to rotate according to a set angle and a set time so as to display the timing progress element from the background element.

According to another aspect of the present disclosure, there is provided a chronograph progress display device including:

a container module for setting a zone container;

the element module is used for setting a background element and a timing progress element in the regional container;

and the control module is used for controlling the timing progress element to rotate according to a set angle and a set time so as to display the timing progress element from the background element.

According to another aspect of the present disclosure, there is provided an electronic device including:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,

the memory stores instructions executable by the at least one processor to cause the at least one processor to perform a method according to any one of the embodiments of the present disclosure.

According to another aspect of the present disclosure, there is provided a non-transitory computer readable storage medium having stored thereon computer instructions for causing a computer to perform a method according to any one of the embodiments of the present disclosure.

According to another aspect of the present disclosure, a computer program product is provided, comprising a computer program which, when executed by a processor, implements a method according to any of the embodiments of the present disclosure.

The scheme can realize clear circular countdown display effect and can realize animation transition effect.

It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.

Drawings

The drawings are included to provide a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:

fig. 1 is a schematic flow chart diagram of a timing progress display method according to an embodiment of the present disclosure;

FIG. 2 is a flow chart diagram of a timing progress display method according to another embodiment of the present disclosure;

fig. 3 is a control flow chart of a timer in a chronograph progress display method according to another embodiment of the present disclosure;

fig. 4 is another control flowchart of a timer in a chronograph progress display method according to another embodiment of the present disclosure;

FIG. 5 is a schematic view of a timing progress display device according to an embodiment of the disclosure;

fig. 6 is a schematic structural view of a chronograph progress display device according to another embodiment of the present disclosure;

FIG. 7 is a diagram illustrating the display effect of the initial state of the countdown ring;

FIG. 8 is a schematic diagram of the composition of a countdown ring;

FIG. 9 is a schematic diagram of a variation of the countdown circle;

FIG. 10 is a schematic diagram of timer logic;

FIG. 11 is a schematic block diagram of an example electronic device that may be used to implement embodiments of the present disclosure.

Detailed Description

Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

Fig. 1 is a flowchart illustrating a timing progress display method according to an embodiment of the disclosure. The method can comprise the following steps:

s101, setting a regional container;

s102, setting a background element and a timing progress element in the regional container;

s103, controlling the timing progress element to rotate according to a set angle and a set time so as to display the timing progress element from the background element.

In one possible embodiment, a CSS (Cascading Style Sheets) may be employed to achieve the timing progress display effect. CSS is a computer Language for expressing file styles such as HTML (HyperText Markup Language), XML (EXtensible Markup Language), and the like. The CSS may statically modify the web page and may also dynamically format elements of the web page in coordination with various scripting languages.

In the disclosed embodiment, the CSS setting area container is employed. A background element and a timing progress element may be placed within the zone container. The timed progress may be a countdown progress, for example, counting down from 10 seconds to 0 seconds end. The timed progress may also be a positive timed progress, for example, from 1 second on to 10 seconds off. Timing progress may be presented in the form of a progress bar.

In embodiments of the present disclosure, the countdown progress element may be a countdown progress bar element, such as a countdown progress bar circle. The timing progress element may be a timing progress bar element, such as a timing progress bar circle.

In the disclosed embodiments, the timing progress element may be in a hidden state before timing begins. In the regional container, the timing progress element can be exposed from the background element by controlling the timing progress element to rotate according to the set angle and the set time, so that the effect of dynamic timing is realized.

Fig. 2 is a schematic flow chart of a timing progress display method according to another embodiment of the disclosure, which includes one or more features of the above-mentioned timing progress display method embodiment. In one possible embodiment, the positioning of the zone containers is relative positioning. By relative positioning, the region containers and the elements they comprise can be displayed in different areas of a display interface, such as a web page. For example, a zone container along with the elements it includes may be moved to any location of the display interface.

In one possible embodiment, the background element and the timing progress element are positioned in an absolute position with reference to the regional container. For example, the background element and the countdown progress bar element may be fixed in position with respect to the zone container, and the background element and the countdown progress bar element may move along with the movement of the zone container, so that a timing display effect is achieved at any position of the display interface.

In a possible implementation manner, the frame widths of the background element and the timing progress element are the same, and the frame colors are different.

In the embodiment of the present disclosure, the border pixels and colors of the background element and the timing progress element may be set by a border attribute in the CSS. The larger the bezel pixels, the wider the element width. For example, the background element and the chronograph progression element may be shaped as circular rings of the same size. The rims of the rings may be of the same width. This may allow the background element and the timing progress element to be aligned, which may present a better visual effect in case the timing progress element is exposed by rotation, e.g. the background element may be filled in the state the timing progress element is exposed by rotation. Of course, the widths of the borders of the background element and the timing progress element may be set to be different. For example, the background element bezel width is greater than the bezel width of the timing progress element. For another example, the border width of the background element is smaller than the border width of the timing progress element.

In the disclosed embodiment, the colors of the background element and the timing progress element may be different. The colors of the background element and the timing progress element may also have a significant difference. For example, the background element is light color such as white, and the chronograph element is dark color such as red and green. Through the shape and the color of setting up background element and timing progress element, under the condition that timing progress element rotation is revealed, can show the visual effect that timing progress element filled up background element gradually to realize the timing. For example, displaying a visual effect that the countdown progress bar circle fills up the background elements gradually, thereby achieving countdown.

The specific shapes and colors are only examples and are not shown, and can be flexibly set according to specific requirements in practical application.

In a possible implementation manner, the regional container comprises a first sub-container and a second sub-container, the first sub-container and the second sub-container each occupy half of the regional container in a tiled display, and the content overflow is hidden. For example, the zone container may be an outer container, and the first and second sub-containers may be inner containers. The first and second sub-containers may have the same height as the outer container, and may have widths that are half the width of the outer container, respectively. Also, the first sub-container and the second sub-container may be positioned relatively. The first and second sub-containers may each occupy half of the area container in position. In the CSS, the child container can be made to implement content overflow hiding by setting the overflow attribute of the child container to hidden. The colored part of the timing progress element can be hidden by setting the content overflow hiding of the sub-container, so that the display state before the timing is started is presented.

In a possible embodiment, the timing schedule element comprises a first sub-element and a second sub-element, the first sub-element being located in the first sub-container, the second sub-element being located in the second sub-container. In the embodiment of the disclosure, the sub-element is located in the sub-container, so that part of the sub-element is hidden and part of the sub-element is displayed. For example, when the frame line of the circular sub-element is provided, the frame line of the sub-element may be colored half and colorless half, thereby forming a semicircular ring effect. In addition, the colored region can be rotated to the outside of the wrap (child container) by the rotate attribute to be hidden.

In a possible implementation, the border color of the first sub-element is a first color, and the first edge and the second edge of the first sub-element are transparent;

the border color of the second sub-element is a first color, and the third and fourth sides of the second sub-element are transparent.

In one example, the first sub-element and the second sub-element may be semi-transparent, typically having a color. For example, the first sub-element and the second sub-element may be display effects of a half circle ring. In the CSS, the sub-elements may be arranged into a circular ring by a border and border-radius attribute. The color of the ring can be set by the border: solid attribute. Further, the state of each side of the child element can be set by attributes such as bottom-top, bottom-left, bottom-bottom, bottom-right, and the like. If the child-top attribute of a sub-element is set to transparent, indicating that the upper side of the sub-element is set to transparent, other sides may also be set to transparent in a similar manner.

For example, a first sub-container occupies the left half of the zone container and a second sub-container occupies the right half of the zone container. The first sub-element is used to form the progress circle on the left and the second sub-element is used to form the progress circle on the right. The binder-top, binder-left attribute of the first sub-element may be set to "transfer", and the binder-bottom, binder-right attribute of the second sub-element may be set to "transfer". And rotating the first sub-element and the second sub-element by-45 degrees through the rotate attribute, thereby rotating the colored part of the first sub-element to the outside of the first sub-container to be hidden, and rotating the colored part of the second sub-element to the outside of the second sub-container to be hidden.

In the embodiment of the present disclosure, by setting the border color of the child element to be partially colored and partially transparent, the colored portion of the timing progress element can be hidden by the child container, thereby presenting the display state before the start of timing.

In a possible embodiment, as shown in fig. 2, controlling the timing schedule element to rotate according to a set angle and a set time comprises:

s201, controlling the first sub-element to rotate from a first angle to a second angle according to a first direction so as to expose a first color on a first part of the background element;

s202, controlling the second sub-element to rotate from the second angle to the first angle according to the first direction, so that the second part on the background element is exposed to the first color.

In the embodiments of the present disclosure, the first direction may be clockwise or counterclockwise. For example, if it is desired to display a circular ring-shaped time display effect, the first angle may be 0 degrees (i.e., 360 degrees) and the second angle may be 180 degrees.

In one example, the first element is controlled to rotate clockwise from 0 degrees to 180 degrees, exposing the first color of the first sub-element from a first part, e.g., a right half, on the background element. And, the second sub-element may be controlled to continue to rotate clockwise from 180 degrees to 360 degrees, exposing the first color of the second sub-element from a second portion, e.g., the left half, on the background element.

In another example, the first element is controlled to rotate from 360 degrees to 180 degrees counterclockwise, exposing the first color of the first sub-element from a first part, e.g., a right half, on the background element. And, the second sub-element may be controlled to continue to rotate clockwise from 180 degrees to 0 degrees, exposing the first color of the second sub-element from a second portion, e.g., the left half, on the background element. It may be rotated every 1 or a few seconds to achieve a timing effect that gradually reveals color.

In the disclosed embodiment, the rotation may be performed every 1 second or several seconds, thereby achieving a timing effect of gradually exposing the color. By controlling the rotation of the first sub-element and the second sub-element, the color of the timing progress element can be gradually exposed on the background element, and the timing progress display effect is achieved.

In one possible embodiment, the attributes of the zone container include at least one of:

background color, height, width, positioning mode, hierarchy and display mode.

The attributes of the region container are merely examples and not limitations, and other attributes can be flexibly selected or added according to requirements in practical applications. By setting various attributes of the region container, it is possible to obtain a variety of region container styles that more meet the demand.

For example, in the CSS, the background color of the zone container may be set by a background-color attribute; the height of the zone container can be set by the height attribute; the width of the zone container can be set by the width attribute; the positioning mode of the area container can be set through the position attribute; the hierarchy of the zone container can be set by a z-index (hierarchy) attribute; the display mode of the region container can be set by a display attribute. If the position attribute of the area container is relative, it indicates that the positioning mode of the area container is relative positioning. If the display attribute of the region container is flex, the display mode of the region container is indicated as filling display, for example, the display region occupied by the whole region container is filled with the color set in background-color. In practical application, values of various attributes of the region container can be set according to requirements, and a required display effect of the region container is obtained.

In one possible embodiment, the background element comprises at least one of the following attributes:

border pixels, border color, border radian, box model, background, height, width, positioning mode, alignment mode, font color, font size, line height and text arrangement mode.

The attributes of the background elements are only examples and not limitations, and other attributes can be flexibly selected or added according to requirements in practical application. Various background styles which are more in line with requirements can be obtained by setting various attributes of the background elements.

For example, in the CSS, a borderline pixel may be set by a binder (variable frame) attribute; the solid line color that can be used for the border can be set by the bold: solid attribute.

As another example, the bezel arc may be set by a border-radius attribute. Specifically, for example, if the border-radius attribute of the background element is set to 300px (pixels), the border of the background element may be caused to assume a certain arc, thereby displaying a circular ring shape.

As yet another example, in CSS, the box model may be set by a box-sizing attribute; the state of the background can be set through the background attribute; the height of the zone container can be set by the height attribute; the width of the zone container can be set by the width attribute. Specifically, for example, if the background attribute of the background element is set to transparent, the background of the background element may be made transparent, exposing the color of the container area below the background element.

As another example, in the CSS, the positioning manner can be set by the position attribute. Specifically, for example, if the position attribute of the background element is set to absolute (absolute), the background element may be positioned in an absolute position. The alignment attributes may include left, top, right, bottom, etc., which may indicate how to maintain alignment with the outer container. In one specific example, the outer container "second" is sized as a square 300 a wide and 300 a high. The background circle inside the outer container is also 300 a wide and 300 a high. If the background ring and the outer layer container are required to be made, setting the second container as a relative positioning position; and the background ring is set to absolute positioning position, and the alignment of the background ring is set to have left of 0 to indicate alignment to the leftmost side of the outer container "second" and top of 0 to indicate alignment to the uppermost side of the outer container "second".

As another example, in the CSS, font color can be set by color (color attribute); the font size of the text to be displayed can be set through a font-size attribute; the line spacing of the font to be displayed can be set through line-height; the text arrangement of the font to be displayed can be set by text-align. Specifically, for example, the position attribute of the background element is set to center (center), so that the text arrangement manner of the background element may be center alignment, or the text arrangement manner may be other, such as left alignment, right alignment, dispersed alignment, and the like.

In a possible embodiment, the timing progress element comprises at least one of the following attributes:

frame pixels, frame color, frame radian, box model, side state, rotation angle, height, width, positioning mode, alignment mode, transition effect and transition time.

The attributes of the timing progress element are only examples and are not limited, and other attributes can be flexibly selected or added according to requirements in practical application. For specific examples of the implementation of the border pixels, border colors, border radians, box models, heights, widths, and positioning manners of the timing progress elements through the CSS, reference may be made to the description of the relevant attributes of the background elements, which is not described herein again. Various timing progress patterns which are more in line with requirements can be obtained by setting various attributes of the timing progress elements.

For example, in the CSS, the state of each edge in the frame of the timing progress element will be set by attributes such as the bottom-top, the bottom-left, the bottom-bottom, and the bottom-right. Setting the attribute of the state of a certain edge as transparent can make the whole edge to be in a transparent state, and expose the color below the edge. As another example, the timing progress element may be rotated by a certain angle by a rotate attribute.

For another example, in the CSS, the alignment attribute may include left (left), top, right (right), bottom, and the like, and the alignment of the timing progress element with the outer container may be set. For example, left of 0 means to align to the leftmost side of the outer container "second", right of 0 means to align to the rightmost side of the outer container "second". Specifically, for example, the alignment attribute of the first sub-element may be set to left of 0, and the alignment attribute of the second sub-element may be set to right of 0.

Through the attribute of the alignment mode, the outer layer container, the background element and the progress element can be overlapped together, so that the display effect of the container at the lowest layer, the background element at the middle layer and the timing progress element at the uppermost layer is displayed finally.

As another example, in the CSS, a transition effect applied by the time-keeping progress element may be set by a transition-property attribute. If the transition-property attribute is set to transform, the timing progress element can realize a gradual transition effect, and the visual effect is more natural and has no sharp feeling.

As another example, in the CSS, the transition time of the transition effect applied by the timing progress element can be set by a transition-duration attribute. If the transition-duration attribute is set to 1s, the transition time is 1s, which means that the current change, for example, a change rotated clockwise by a certain angle, is gradually completed within 1 s. If the transition-duration attribute is set to 2s, the transition time is 2s, which means that the current change, for example, a change rotated clockwise by a certain angle, is gradually completed within 2 s. The specific time value is not limited, and can be flexibly selected according to the required display effect.

In a possible embodiment, the rotation of the background element and the timed progress element is controlled by a timer. The timer may be a JS (javascript) timer. The angle, time and the like of each rotation of the background element and the timing progress element can be set through the timer, so that the colored part of the timing progress element is gradually exposed through the rotation, and a dynamic timing effect is presented.

In one possible embodiment, the timer controls the timing progress element to rotate based on at least one of:

the total number of rotations;

current number of rotations;

the angle of each rotation;

the time interval of each rotation;

an increased value of the number of rotations;

an intermediate value of the number of rotations;

displaying a value;

the reduced value of the value is displayed.

In the embodiment of the disclosure, the timer can control the rotation of the timing progress element through the rotation times, the rotation angle and other related parameters, so as to realize a dynamic timing display effect.

In the disclosed embodiment, the total number of rotations may be determined according to the total time counted and the time interval of each rotation, for example, the total number of rotations divided by the total time counted divided by the time interval of each rotation. For example, if the total time counted is 10s and the time interval of each rotation is 1s, the total number of rotations may be 10. For another example, if the total time counted is 12s, the time interval of each rotation is 2s, and the total number of rotations can be 6.

In the disclosed embodiment, the current number of rotations may be represented by a numerical value, and the current number of rotations may be less than or equal to the total number of rotations. In addition, after each rotation, the current number of rotations may be updated with the increased value of the number of rotations. If the increment of the number of rotations is 1, the current number of rotations may be incremented by 1 for every 1 rotation until the total number of rotations is reached. For example, if i is used to indicate the current number of rotations and the value of i starts from 0, then i-0 indicates the first rotation, i-1 indicates the second rotation, and if 10 rotations are required, the rotation is stopped when i-9. For another example, if j is used to indicate the current number of rotations and j starts from 1, j-1 indicates the first rotation, j-2 indicates the second rotation, and if 10 rotations are required, the rotation is stopped when j-10. The added value of the rotation times can also be other values, such as 0.5, 2, 3, and the like, and can be flexibly set according to application requirements.

In the disclosed embodiment, the angle of each rotation may be determined according to the total rotation angle and the total number of rotations. If the effect of filling the whole circular ring needs to be displayed, the total rotating angle can be 360 degrees. The total rotation angle may be less than 360 degrees if the full ring fill effect is not to be displayed. For example, if a total of 360 degrees of rotation, the total number of rotations is 10, and the angle of each rotation is 36 degrees (360 divided by 10). For another example, if a total of 360 degrees of rotation is required, and the total number of rotations is 20, the angle of each rotation is 18 degrees (360 divided by 20).

In embodiments of the present disclosure, an intermediate value of the number of rotations may be used to control the two sub-elements of the timed progress element to rotate separately. For example, in the case where the current rotation number is smaller than the intermediate value of the rotation number, the first sub-element is controlled to rotate; and controlling the second sub-element to rotate when the current rotation number is larger than or equal to the middle value of the rotation number. For another example, in the case that the current rotation number is smaller than the intermediate value of the rotation number, the second sub-element is controlled to rotate; and controlling the first sub-element to rotate when the current rotation number is larger than or equal to the middle value of the rotation number. In this way, in combination with the initial angle of rotation of the first sub-element and the second sub-element, the angle of each rotation, and the like, the colored portion of the first sub-element can be exposed by rotation, and then the colored portion of the second sub-element can be exposed by rotation. If the colored portions of the first sub-element and the second sub-element are half-circles, a timing effect can be presented in which the entire circle of the background element is gradually filled counterclockwise or clockwise.

In the disclosed embodiment, the displayed value may include an initial value of the timing that needs to be displayed. For example, if the countdown starts from 10 seconds, the display value may be "10". As another example, if the timer is counting from 0 seconds, the display value may be "0". The color, font, size, lines, etc. of the display values may be set in the background element. The reduced value of the displayed value may indicate a value by which the displayed value needs to be reduced after each rotation. For example, if 1 second is rotated 1 time, the display value may be decreased by 1. As another example, if a 2 second rotation is 1, the display value may be decreased by 2.

In a possible embodiment, controlling the timing progress element to rotate by a set angle and a set time using a timer includes:

updating the display value according to the reduced value of the display value when the current rotation number is less than or equal to the total rotation number;

and controlling the first sub-element or the second sub-element of the timing progress element to rotate along the first direction according to the current rotation number and the intermediate value of the rotation number according to the angle of each rotation, and updating the current rotation number according to the increased value of the rotation number.

In a countdown scenario, as shown in fig. 3, the step of controlling the timing progress element to rotate according to the set angle and the set time using the timer may include:

s301, judging whether the current rotation times are larger than the total rotation times; if so, S302 is performed, otherwise S303 is performed.

And S302, if the current rotation times are larger than the total rotation times, clearing the count of the timer, and ending timing.

S303, if the current rotation times is less than or equal to the total rotation times, updating the display value according to the reduction value of the display value. For example, the display value minus 1.

S304, judging whether the current rotation frequency is smaller than the middle value of the rotation frequency. If so, executing S305; otherwise, S306 is executed.

And S305, if the current rotation number is smaller than the middle value of the rotation number, controlling the first sub-element of the timing progress element to rotate along the first direction according to the angle of each rotation. The current rotation number is updated according to the increased value of the rotation number, for example, the current rotation number is increased by 1, and the step returns to execute S301.

And S306, if the current rotation number is larger than or equal to the middle value of the rotation number, controlling the second sub-element of the timing progress element to rotate along the first direction according to the angle of each rotation. The current rotation number is updated according to the increased value of the rotation number, for example, the current rotation number is increased by 1, and the step returns to execute S301.

In the above-described rotation process, the rotation order of the first sub-element and the second sub-element of the progress element may be changed, for example, referring to fig. 4, S305 and S306 may also be changed to the following steps:

and S405, if the current rotation number is smaller than the middle value of the rotation number, controlling the second sub-element of the timing progress element to rotate along the first direction according to the angle of each rotation. The current rotation number is updated according to the increased value of the rotation number, for example, the current rotation number is increased by 1, and the step returns to execute S301.

And S406, if the current rotation number is larger than or equal to the middle value of the rotation number, controlling the first sub-element of the timing progress element to rotate along the first direction according to the angle of each rotation. The current rotation number is updated according to the increased value of the rotation number, for example, the current rotation number is increased by 1, and the process returns to the step S301.

In the embodiment of the present disclosure, the rotation of the first sub-element and the second sub-element of the timing progress element is controlled by the timer, so that a dynamic timing display effect can be achieved.

Fig. 5 is a schematic structural diagram of a timing progress display device according to an embodiment of the present disclosure, and the device may include:

a container module 501 for setting a zone container;

an element module 502, configured to set a background element and a timing progress element in the region container;

a control module 503, configured to control the timing progress element to rotate according to a set angle and a set time, so as to display the timing progress element from the background element.

Fig. 6 is a schematic structural diagram of a chronograph progress display device according to another embodiment of the present disclosure, which includes one or more features of the embodiment of the chronograph progress display device. In one possible embodiment, the positioning of the zone containers is relative positioning.

In one possible embodiment, the background element and the timing progress element are positioned in an absolute position with reference to the regional container.

In a possible implementation manner, the regional container comprises a first sub-container and a second sub-container, the first sub-container and the second sub-container each occupy half of the regional container in a tiled display, and the overflow of the content is hidden.

In a possible embodiment, the timing schedule element comprises a first sub-element and a second sub-element, the first sub-element being located in the first sub-container, the second sub-element being located in the second sub-container.

In a possible implementation, the border color of the first sub-element is a first color, and the first edge and the second edge of the first sub-element are transparent; the border color of the second sub-element is a first color, and the third and fourth sides of the second sub-element are transparent.

In one possible implementation, the control module 503 includes:

a first rotation sub-module 601 for controlling the first sub-element to rotate from a first angle to a second angle according to a first direction to expose a first color on a first portion of the background element;

a second rotation sub-module 602 for controlling the second sub-element to rotate from the second angle to the first angle according to the first direction to expose the first color on the second portion of the background element.

background color, height, width, positioning mode, hierarchy and display mode.

In a possible embodiment, the rotation of the background element and the timed progress element is controlled by a timer.

the total number of rotations;

current number of rotations;

the angle of each rotation;

the time interval of each rotation;

an increased value of the number of rotations;

an intermediate value of the number of rotations;

displaying the value;

a reduced value of the value is displayed.

In a possible embodiment, the timer for controlling the timing progress element to rotate according to a set angle and a set time includes:

For a description of specific functions and examples of each module and sub-module of the timing progress display device in the embodiment of the present disclosure, reference may be made to the related description of the corresponding step in the embodiment of the timing progress display method, which is not described herein again.

In the related art, the edge of a countdown circular ring realized by using Canvas drawing has a fuzzy saw-tooth shape and is not clear enough; moreover, the Canvas can not realize the animation transition effect, and is very abrupt.

In an application scenario, when the timing progress display method of the embodiment of the disclosure is used for realizing circular countdown, the edge of a circular ring is smooth and clear, and an animation transition effect can be further realized. As shown in fig. 7, the display effect of the initial state of the ring in the webpage or APP is counted down. The countdown ring may begin counting down from "10". As shown in fig. 8, in the present example, the area container is a circular ring area container 801, the background element is a background circular ring 802, and the timing progress element is a progress bar circular ring 803.

For example, a ring area container 801 can be laid out by CSS, and a background ring 802 and a progress bar ring 803 are put in the ring area container 801. The ring area container 801 is in relative orientation and the background ring 802 is laid on the bottom of the ring area container in absolute orientation. The progress bar rings 803 occupy half of the zone container through the sub-containers, respectively, and are located at the left and right sides of the zone container. For example, the child containers in the left and right regions are occupied by one child element with a width twice that of the child container, and then the border lines and the colors of the two child elements are set to be half respectively, so that the colored part is hidden. And then transform: rotate to control the angle of the sub-element to display different frames. And finally writing a timer through JS, rotating the angle of the sub-element at intervals to expose partial colors of the sub-element, and closing the sub-element into a complete ring after countdown is finished. As shown in fig. 9, the timer may also control the displayed value to change during the rotation. For example, from a value of "7" to a value of "6".

The implementation of the left and right two-part rings and the JS timer is described in detail below.

1. Left and right two-part circular ring for CSS setting

The left and right partial areas can be combined together for display. If the ring needs to be rotated to realize, if the progress bar ring is the whole ring, the rotation can not show the effect of the progress bar. The progress bar circular ring is divided into a left semicircular ring and a right semicircular ring to be combined, and the two semicircular rings are in a hidden state in respective areas initially. When the timing starts, the semicircular ring of one side region starts to rotate. And after the semicircular rings in the area on one side are completely exposed, the semicircular rings in the area on the other side start to rotate until the two semicircular rings are exposed to form a whole circular ring, and the timing is finished.

2. Implementation of JS timer

The CSS is mainly a static display area, and a JS timer is required to be relied on to display a dynamic effect by the circular ring progress bar. And setting a timing interval, calculating the angle of the ring required to rotate at each interval, and sequentially increasing the angle. And when the rotation of the semicircular rotating ring is finished, switching to the rotating angle of the other half area, and emptying the timer to stop timing when the rotation is finished finally.

The following describes a specific implementation of a specific circular countdown display scheme.

1. Is provided with a left part and a right part of circular rings

1-1) for example, a Dom (Document Object Model) structure, which can be implemented using the following code:

the Dom structure may include a circular ring area container "second", and the circular ring area container may include a background circular ring "bgCircle" and a semi-circular ring (progress bar) of a progress bar circular ring, that is, a region container "wrap". The timing value presented on the background circle can be implemented by "current".

1-2) circular ring zone container "second" may implement different styles by one or more of the following attributes: background-color, height, width position, z-index, display, etc. The background color of the container in the ring area can be set by the background-color attribute. The height of the annular region container can be set by the height attribute. The width of the container in the annular region can be set by the width attribute. For example, with a height attribute of 300 pixels and a width attribute of 300 pixels, the resulting container of the circle region may be square. The positioning mode of the ring area container can be set through the position attribute. The hierarchy of the torus region container can be set by the z-index attribute. The display mode of the circular ring area container can be set through the display attribute. If the position attribute of the area container is relative, it indicates that the positioning mode of the circular area container is relative positioning. If the display attribute of the circular ring area container is flex, the display mode of the circular ring area container is indicated to be filling display, for example, the display area occupied by the whole circular ring area container is filled with the color set in background-color.

1-3) background circle "bgCircle" may implement different styles by one or more of the following attributes: a container (variable box), a container-radius, a box-sizing, a background, a height, a width, a color, a font-size, a line-height, a text-alignment, a position, an alignment (left, right, top, bottom), and the like.

Frame pixels which can be used for setting a background ring can be set through the folder attribute; the solid line color that may be used for the background annular border may be set by the bold: solid attribute.

The bezel arc may be set by the border-radius attribute. Specifically, for example, if the border-radius attribute of the background circle is set to 300px, the border of the background element may be caused to assume a certain arc, thereby displaying a circular shape. The box model box-sizing, the border-box, can be set by the box-sizing attribute.

The background state of the background ring can be set through the background attribute; if the background attribute of the background element is set to transparent, the background of the background element can be made transparent, exposing the color of the container area under the background element.

The height of the background circle can be set by the height attribute. The width of the background circle can be set by the width attribute. For example, the height attribute is 300 pixels, the width attribute is 300 pixels, and the resulting background circle overlaps a portion of the container border in the circle region.

The positioning mode can be set by the position attribute. Specifically, for example, if the position attribute of the background circle is set to absolute, the background circle may be positioned in an absolute position. The alignment attribute may include left, top, right, bottom, etc., and may indicate the manner in which the container is aligned with the outer container. If the height and width of the outer container "second" and the background circle "bgCircle" are the same. Setting the alignment mode of the background ring to be 0 at the left, which means to align to the leftmost side of the outer container "second"; the upper side top is 0, indicating alignment to the uppermost side of the outer container "second".

The color of the font displayed on the background ring can be set through the color; the font size of the character to be displayed can be set through the font-size attribute; the line spacing of the fonts to be displayed can be set through line-height; the text arrangement mode of the font to be displayed can be set through text-align. Specifically, for example, setting the position attribute of the background element as center may make the text arrangement of the background element be centered and aligned.

1-4) the area container 'wrap' of the left and right semicircular rings accounts for half of the total container of the outer layer to be tiled and displayed, and the overflow and hiding of the content are set.

For example, "wrap" may include attributes of height, width, overlap, position, and the like. And content overflow concealment can be achieved through overlap. By position: relative can realize the relative positioning of the semicircular ring area.

1-5) the width and height of the left and right semicircular ring areas can be the same as the width and height of the total container. For example, the height of the semicircular ring area is set to be equal to the height of the area container "second", and the width of the semicircular ring area is set to be half the width of the area container "second".

When the frame line of the progress bar ring is arranged, the frame line of the progress bar ring can be set to be half colored and half colorless, and the effect of the semicircular ring is formed.

For example, the border pixels that can progress the bar circle can be set by the book attribute; the solid attribute may set the color of the solid line that the progress bar circle border may take, via the binder. The color is different from the background ring color. The height and width of the progress bar circle can be set to be the same as the background circle by the height and width attributes. The progress bar loop is formed into a loop shape by setting a border-radius:312px such that the progress bar loop has a curvature. The progress bar ring may be divided into a left ring and a right ring. The left ring may set the left side of the progress bar ring to be transparent by a bottle-left: solid transport, and the upper side of the progress bar ring to be transparent by a bottle-top: solid transport. The right circular ring may set the left side of the progress bar circular ring to be transparent by a bottle-right: solid transfer, and the upper side of the progress bar circular ring to be transparent by a bottle-bottom: solid transfer. The progress bar ring can be rotated by a certain angle, for example, -45 degrees, through rotate, so that the colored area of the progress bar ring is rotated to the outside of the sub-container "wrap" where the progress bar ring is located and hidden. The position attribute of the progress bar circle (left and right circles) may be absolute, representing absolute positioning.

2. Timer implementation

In the present example, taking time counting for 10 seconds as an example (seconds can be set optionally), firstly, setting variables for displaying a counting variable and rotation angles of the left and right semicircles; 360 degrees (deg) for 10 seconds, i.e., 36deg per second. The rotation of the left and right semicircular rings is 5 parts respectively. Starting from the right side, when the number i is 0-4, the right semicircular ring rotates. When the number i is 5-9, the left semicircular ring rotates, and the rotation is stopped when the time is 10 times.

For example, the displayed value may be set to current:10, and the initial angle of the left and right circles is-45 degrees, namely leftAngle:45 and rightAngle: 45.

Assume that the initial number i is 0 and the angle ratio of each rotation is 360/10, i.e. 36 degrees.

As shown in fig. 10, the timer may perform the following logic:

and S1001, judging whether i is larger than 9, if so, clearing the count of the timer, and ending the timing. Otherwise, the currently displayed numerical value is decreased by 1, for example, current-1, and S1002 is performed.

S1002, if i is less than or equal to 9, judging whether i is less than 5. If so, executing S1003; otherwise, S1004 is executed.

And S1003, if i is smaller than 5, increasing the right semicircular ring angle by a certain angle ratio, for example, rotating clockwise by 36 degrees. The value of i +1 after rotation. Execution returns to S1001.

And S1004, if i is greater than or equal to 5 and less than or equal to 9, increasing the left semicircular ring angle by a certain angle ratio, namely rotating clockwise by 36 degrees. The value of i +1 after rotation. Execution returns to S1001.

In this way, the hidden color of the right semicircle can be rotated out once, and each time, the hidden color of the right semicircle can be rotated out 36 degrees, and 5 times can be rotated from 0 degree to 180 degrees. Then, the color hidden in the left semicircular ring is rotated out again and again, each time, the color is rotated out 36 degrees, and 5 times of rotation can be from 180 degrees to 360 degrees. In this way, a timing effect can be exhibited in which the background circle is gradually filled with the color of the semicircular ring.

As the code executes, the change in progress may be instantaneous and an animation effect may be added to the progress bar circle. In order to realize the animation effect, a transition style can be added to the attribute of each semicircular ring.

For example: the transition effect of the progress bar circle can be set through a transition-property attribute. If the transition-property attribute of the left semicircle ring and the right semicircle ring is set as transform, the progress bar circle ring can realize a gradual transition effect, the visual effect is more natural, and the sudden feeling is avoided.

As another example, the transition time of the transition effect of the progress bar circle may be set by a transition-duration attribute. If the transition-duration attribute of the left and right semicircular rings is set to 1s, the transition time is 1s, which means that the rotation is gradually 36 degrees within 1 s.

In the technical scheme of the disclosure, the acquisition, storage, application and the like of the personal information of the related user all accord with the regulations of related laws and regulations, and do not violate the good customs of the public order.

The present disclosure also provides an electronic device, a readable storage medium, and a computer program product according to embodiments of the present disclosure.

FIG. 11 shows a schematic block diagram of an example electronic device 1100 that may be used to implement embodiments of the present disclosure. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.

As shown in fig. 11, the device 1100 comprises a computing unit 1101, which may perform various appropriate actions and processes according to a computer program stored in a Read Only Memory (ROM)1102 or a computer program loaded from a storage unit 1108 into a Random Access Memory (RAM) 1103. In the RAM 1103, various programs and data necessary for the operation of the device 1100 may also be stored. The calculation unit 1101, the ROM 1102, and the RAM 1103 are connected to each other by a bus 1104. An input/output (I/O) interface 1105 is also connected to bus 1104.

A number of components in device 1100 connect to I/O interface 1105, including: an input unit 1106 such as a keyboard, a mouse, and the like; an output unit 1107 such as various types of displays, speakers, and the like; a storage unit 1108 such as a magnetic disk, optical disk, or the like; and a communication unit 1109 such as a network card, a modem, a wireless communication transceiver, and the like. The communication unit 1109 allows the device 1100 to exchange information/data with other devices through a computer network such as the internet and/or various telecommunication networks.

The computing unit 1101 can be a variety of general purpose and/or special purpose processing components having processing and computing capabilities. Some examples of the computing unit 1101 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various dedicated Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and the like. The calculation unit 1101 performs the respective methods and processes described above, such as the chronograph progress display method. For example, in some embodiments, the timing progress display method may be implemented as a computer software program tangibly embodied on a machine-readable medium, such as storage unit 1108. In some embodiments, part or all of the computer program may be loaded and/or installed onto device 1100 via ROM 1102 and/or communication unit 1109. When the computer program is loaded into the RAM 1103 and executed by the computing unit 1101, one or more steps of the chronograph progress display method described above may be performed. Alternatively, in other embodiments, the computing unit 1101 may be configured to perform the timing progress display method by any other suitable means (e.g., by means of firmware).

Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.

Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic, speech, or tactile input.

The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), Wide Area Networks (WANs), and the Internet.

The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server with a combined blockchain.

It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be executed in parallel or sequentially or in different orders, and are not limited herein as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved.

The above detailed description should not be construed as limiting the scope of the disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present disclosure should be included in the scope of protection of the present disclosure.

Claims

1. A timing progress display method comprises the following steps:

setting a regional container;

2. The method of claim 1, wherein the zone containers are positioned in a relative manner.

3. The method of claim 1 or 2, wherein the background element and the timed progress element are positioned in absolute positions with reference to the regional container.

4. The method of any one of claims 1 to 3, wherein the background element and the timing progress element have the same border width and different border colors.

5. The method of any one of claims 1 to 4, wherein the regional container comprises a first sub-container and a second sub-container, the first sub-container and the second sub-container each occupy half of a tiled display of the regional container, and the content overflow is hidden.

6. The method of claim 5, wherein the timed progress element comprises a first sub-element and a second sub-element, the first sub-element being located in the first sub-container, the second sub-element being located in the second sub-container.

7. The method of claim 6, wherein the border color of the first sub-element is a first color and the first and second edges of the first sub-element are transparent;

8. The method of claim 6 or 7, wherein controlling the timing schedule element to rotate by a set angle and a set time comprises:

controlling the first sub-element to rotate from a first angle to a second angle in a first direction to expose a first color on a first portion of the background element;

the second sub-element is controlled to rotate from the second angle to the first angle in the first direction to expose the first color on the second portion of the background element.

9. The method of any of claims 1-8, wherein the attributes of the zone container include at least one of:

background color, height, width, positioning mode, hierarchy and display mode.

10. The method of any of claims 1 to 9, wherein the background element comprises at least one of the following attributes:

11. The method of any of claims 1-10, wherein the timing progress element comprises at least one of the following attributes:

12. The method of any one of claims 1 to 11, wherein the rotation of the background element and the timed progress element is controlled by a timer.

13. The method of claim 12, wherein the timer controls the timing progress element to rotate based on at least one of:

the total number of rotations;

current number of rotations;

the angle of each rotation;

the time interval of each rotation;

an increased value of the number of rotations;

an intermediate value of the number of rotations;

displaying a value;

a reduced value of the value is displayed.

14. The method of claim 13, wherein controlling the timing progress element to rotate by a set angle and a set time using a timer comprises:

15. A chronograph progress display device comprising:

a container module for setting a zone container;

16. The apparatus of claim 15, wherein the positioning of the zone containers is relative positioning.

17. The apparatus of claim 15 or 16, wherein the background element and the timed progress element are positioned in an absolute position with reference to the zone container.

18. The apparatus of any one of claims 15 to 17, wherein the background element and the timing progress element have the same border width and different border colors.

19. The apparatus of any one of claims 15 to 18, wherein the regional container comprises a first sub-container and a second sub-container, the first sub-container and the second sub-container each occupying half of the regional container in a tiled display and with overflow of content hidden.

20. The apparatus of claim 19, wherein the timed progress element comprises a first sub-element and a second sub-element, the first sub-element being located in the first sub-container, the second sub-element being located in the second sub-container.

21. The apparatus of claim 20, wherein the border color of the first sub-element is a first color and the first and second edges of the first sub-element are transparent;

22. The apparatus of claim 20 or 21, wherein the control module comprises:

a first rotation sub-module for controlling the first sub-element to rotate from a first angle to a second angle in a first direction to expose a first color on a first portion of a background element;

a second rotation sub-module for controlling the second sub-element to rotate from the second angle to the first angle in the first direction to expose the first color on the second portion of the background element.

23. The apparatus of any of claims 15 to 22, wherein the properties of the zone container comprise at least one of:

background color, height, width, positioning mode, hierarchy and display mode.

24. The apparatus of any of claims 15 to 23, wherein the context element comprises at least one of the following attributes:

25. The apparatus of any of claims 15 to 24, wherein the timing progress element comprises at least one of the following attributes:

26. The apparatus of any one of claims 15 to 25, wherein the rotation of the background element and the timed progress element is controlled by a timer.

27. The apparatus of claim 26, wherein the timer controls the timing progress element to rotate based on at least one of:

the total number of rotations;

current number of rotations;

the angle of each rotation;

the time interval of each rotation;

an increased value of the number of rotations;

an intermediate value of the number of rotations;

displaying a value;

a reduced value of the value is displayed.

28. The apparatus of claim 27, wherein the timer for controlling the timing progress element to rotate by a set angle and a set time comprises:

29. An electronic device, comprising:

at least one processor; and

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-14.

30. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-14.

31. A computer program product comprising a computer program which, when executed by a processor, implements the method according to any one of claims 1-14.