Clock drawing method and device, medium and equipment

Abstract

The invention provides a clock drawing method and device, a medium and equipment. The method comprises the following steps: building a contour outer frame of a clock by utilizing a partition mark label of a hypertext markup language; building a dial gauge in the outline frame by using an unordered list label and a list item label of a hypertext markup language; setting up a corresponding pointer in the outline outer frame in a mode of setting a pointer style under the partition mark label; wherein the hands comprise an hour hand, a minute hand and a second hand; and realizing the movement of the pointer in the outline outer frame in a manner of adding an animation effect. According to the invention, a front-end developer can realize the clock effect by using the html label and the css3 instead of using the traditional html, css and javascript, and the method has the advantages of no blockage and no frame loss, low development and maintenance cost, low performance consumption, reduction of network flow and page heavy load time and the like.

Description

Technical Field

[0001] The present invention relates to the technical field of clock drawing, and in particular to a clock drawing method, device, medium and equipment. Background Art

[0002] In the development process of daily front-end needs, sometimes we encounter the need to draw clocks, countdowns and other animations, but the current clock drawing process is cumbersome, the requirements for developers are relatively high, and the subsequent maintenance costs are relatively high. Therefore, it is necessary to provide a new clock drawing solution. Summary of the invention

[0003] In view of at least one of the above technical problems, an embodiment of the present invention provides a clock drawing method and device, medium, and equipment.

[0004] According to a first aspect, a clock drawing method provided by an embodiment of the present invention includes:

[0005] Using the hypertext markup language segmentation tag to build the outline of the clock;

[0006] Using unordered list tags and list item tags of hypertext markup language to build a scale table in the outline frame;

[0007] By setting the pointer style under the segmentation mark label, a corresponding pointer is built in the outline frame; wherein the pointer includes an hour hand, a minute hand and a second hand;

[0008] The pointer in the outline frame is moved by adding animation effects.

[0009] In one embodiment, the step of using a hypertext markup language segmentation tag to construct an outline frame of a clock includes:

[0010] A first category named clock is defined for the separation mark label, and style information of the outline frame is configured in the first category, wherein the style information of the outline frame includes at least one of the position of the clock, the spacing of the outer frame of the clock, the width of the clock, the height of the clock, the inner margin of the clock, the border color of the clock, the border line of the clock, the border radius and the background color of the clock.

[0011] In one embodiment, the unordered list tag and the list item tag using the hypertext markup language to build a scale table in the outline frame includes:

[0012] In the separator mark tag, define an unordered list tag with a class name of minute hand;

[0013] Set 30 list item tags in the unordered list tag, define that one of every 5 list item tags has a tag with a class name of hour hand; define that the front pseudo-class and the back pseudo-class of each list item tag are both set with a scale, and 60 scales are obtained; set the styles of the 60 scales.

[0014] In one embodiment, the setting of the styles of the 60 scales includes:

[0015] Set the list item label as an inline block element and display it in the center, and set the width and height to the first preset pixel; determine the minute hand scale in the front pseudo-class and the back pseudo-class, and set the length of the minute hand scale to the second preset pixel; determine the hour hand scale, and set the length of the hour hand scale to the third preset pixel; the third preset pixel is greater than the second preset pixel;

[0016] Each of the 60 scales is rotated by a different angle through a rotation function, where the rotation angle of the i-th scale is (i-1)*6 degrees, and i is an integer in the range of [1,60].

[0017] In one embodiment, setting a pointer style under the segmentation mark tag to achieve building a corresponding pointer in the outline frame includes:

[0018] Under the first category, a second category named hour hand, a third category named minute hand and a fourth category named second hand are defined to obtain hour hand label, minute hand label and second hand label; the hour hand style is defined in the second category, the minute hand style is defined in the third category and the second hand style is defined in the fourth category to implement the style setting of the hour hand, minute hand and second hand.

[0019] In one embodiment, the adding of animation effects to achieve movement of the pointer in the outline frame includes:

[0020] Animation properties are set for the second hand, animation properties are added for the minute hand, and animation properties are added for the hour hand, so as to achieve animation effects of the second hand, the minute hand, and the hour hand.

[0021] In one embodiment, the method further comprises:

[0022] When adding the animation attribute, the identification mark of the adapted browser is also set so that the drawn clock can be displayed on the adapted browser.

[0023] According to a second aspect, a clock drawing device provided by an embodiment of the present invention includes:

[0024] The outer frame realization module is used to build the outline outer frame of the clock by using the segmentation mark tag of the hypertext markup language;

[0025] A scale realization module, used for building a scale table in the outline frame by using an unordered list tag and a list item tag of a hypertext markup language;

[0026] A pointer realization module, used to realize the construction of corresponding pointers in the outline frame by setting the pointer style under the segmentation mark label; wherein the pointers include hour hand, minute hand and second hand;

[0027] The animation realization module is used to realize the movement of the pointer in the outline frame by adding animation effects.

[0028] According to a third aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed in a computer, enables the computer to execute the method provided in the first aspect.

[0029] According to a fourth aspect, an embodiment of the present invention provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, the method provided in the first aspect is implemented.

[0030] The clock drawing method, device, medium and equipment provided by the embodiment of the present invention first use the segmentation mark tag of the hypertext markup language to build the outline frame of the clock, then use the unordered list tag and list item tag of the hypertext markup language to build a scale table in the outline frame, and then set the pointer style under the segmentation mark tag to realize the construction of the corresponding pointer in the outline frame. Finally, by adding an animation effect, the pointer in the outline frame is moved. It can be seen that the present invention mainly uses CSS and animation technology to realize the drawing of the clock. First, the clock skeleton is simply built using the div tag of HTML, and then the clock skeleton is refined by using the CSS style, that is, the scale and pointer are added to complete a basic circular clock outline, and then the animation technology in CSS3 is used to make the static clock move. This method allows front-end developers to use HTML tags plus CSS3 to realize the clock effect, without using the traditional HTML plus CSS plus JavaScript to realize it, and has the advantages of no blocking and no frame loss, low development and maintenance costs, low performance consumption, and reduced network traffic and page reload time. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 Schematic diagram of the flow of a clock drawing method according to an embodiment of the present invention;

[0032] Figure 2 This is a rendering of an outline frame provided in one embodiment of the present invention;

[0033] Figure 3 This is a diagram showing the effect of setting a scale in the outline frame in one embodiment of the present invention;

[0034] Figure 4 This is a diagram showing the effect of setting the hour hand, minute hand and second hand in one embodiment of the present invention;

[0035] Figure 5 4 is a structural block diagram of a clock drawing device in one embodiment of the present invention. DETAILED DESCRIPTION

[0036] In a first aspect, an embodiment of the present invention provides a clock drawing method, see Figure 1 The method comprises the following steps S110 to S140:

[0037] S110, using a segmentation mark tag of a hypertext markup language to construct an outline frame of the clock;

[0038] Among them, hypertext markup language is html.

[0039] Among them, the separation mark tag is the div tag.

[0040] In one embodiment, the step of using a hypertext markup language segmentation tag to construct an outline frame of the clock in S110 may include:

[0041] A first category named clock is defined for the separation mark label, and style information of the outline frame is configured in the first category, wherein the style information of the outline frame includes at least one of the position of the clock, the spacing of the outer frame of the clock, the width of the clock, the height of the clock, the inner margin of the clock, the border color of the clock, the border line of the clock, the border radius and the background color of the clock.

[0042] As you can see, first, you need an HTML div tag to wrap the entire clock, and define a class called clock for this div tag, so that you can modify this div tag with CSS later; secondly, you need to determine the position of the clock, the spacing of the clock's outer border, the clock's width, height, inner margin, border color, border line, border radius, and background area color in the clock. After setting the above style information, a simple clock outline has been basically completed, see Figure 2 The outline frame is shown.

[0043] It can be seen that in S110, the outline frame of the clock is constructed using the div tag of HTML.

[0044] S120, using an unordered list tag and a list item tag of a hypertext markup language to build a scale table in the outline outer frame;

[0045] In one embodiment, the step of using the unordered list tag and the list item tag of the hypertext markup language to build a scale table in the outline frame in S120 may include S121 to S122:

[0046] S121, defining an unordered list tag with a class name of minute hand in the segmentation mark tag;

[0047] S122. Set 30 list item tags in the unordered list tag, define that one of every five list item tags has a tag with a class name of hour hand; define a scale for each of the front pseudo-class and the back pseudo-class of each list item tag, to obtain 60 scales; set the styles of the 60 scales.

[0048] Among them, the unordered list tag is the ul tag, and the list item tag is the li tag.

[0049] As you can see, add content to the div tag with the class name of clock. First, add a scale table, which is implemented using the HTML ul tag and the li tag used in conjunction with the ul tag. Specifically: define a ul tag with a class name of minute-marks, and wrap 30 li tags in the middle of the ul tag. One of every five li tags has a tag with a class name of hour-marks. Only 30 li tags are used here, and each li tag has a scale for both the before and after pseudo-classes, so 60 scales can be obtained. Then set the style for the 60 scales.

[0050] In one embodiment, the styles of the 60 scales set in S122 include A1-A2:

[0051] A1. Set the list item label as an inline block element and display it in the center, and set the width and height to the first preset pixel; determine the minute hand scale in the front pseudo-class and the back pseudo-class, and set the length of the minute hand scale to the second preset pixel; determine the hour hand scale, and set the length of the hour hand scale to the third preset pixel; the third preset pixel is greater than the second preset pixel;

[0052] A2. Use the rotation function to rotate each of the 60 scales by different angles, where the rotation angle of the i-th scale is (i-1)*6 degrees, and i is an integer in the range of [1,60].

[0053] For example, the ul tag with the class name of minute-marks is defined as an inline element, and the default border style is canceled. Set the li tag as an inline block element and display it in the center, and set the width and height to 200 pixels each. Set the minute hand scale and hour hand scale in the after and before pseudo-classes of the li tag, and set the border line length of the minute hand scale to 4 pixels, and the border line length of the hour hand scale to 20 pixels, and position the minute hand scale and the hour hand scale in the outline frame. Now the 60 scales overlap together, and they need to be expanded. Here we use the transform:rotate() function in CSS3 to rotate each scale at a different angle. The first scale is rotated by 0 degrees, the second scale is rotated by 6 degrees, the third scale is rotated by 12 degrees, ..., the 30th scale is rotated by 174 degrees, ..., the 60th scale is rotated by 354 degrees, and finally a complete scale table is obtained, see Figure 3 The effect diagram is shown.

[0054] S130, by setting a pointer style under the segmentation mark label, a corresponding pointer is built in the outline frame; wherein the pointer includes an hour hand, a minute hand and a second hand;

[0055] In one embodiment, setting a pointer style under the segmentation mark tag in S130 to achieve building a corresponding pointer in the outline frame may include:

[0056] Under the first category, a second category named hour hand, a third category named minute hand and a fourth category named second hand are defined to obtain hour hand label, minute hand label and second hand label; the hour hand style is defined in the second category, the minute hand style is defined in the third category and the second hand style is defined in the fourth category to implement the style setting of the hour hand, minute hand and second hand.

[0057] It can be seen that the outline frame and scale have been drawn in S110 and S120, and the hour hand, minute hand and second hand need to be drawn in S130. Here, the div tag in the html tag is also used to act as the hour hand, minute hand and second hand, and a div tag is nested in a div tag to fill the pointer. The hour hand, minute hand and second hand are located in parallel and are all child elements of the div with the class name of clock.

[0058] Among them, the CSS setting is performed for the second class of the div tag with the class name of hour, that is, the hour hand style is set. The specific process can be: center the second class of tags, and then use the before and after pseudo-classes of the li tag with the class name of hour to set the style to center, use the before pseudo-class to set the hour hand's head style, and use the after pseudo-class to set the rectangular style of the center point, and you can get a complete hour hand. The style settings for the minute hand and the second hand are similar. Figure 4 The effect diagram is shown.

[0059] S140: Adding animation effects to achieve movement of the pointer in the outline frame.

[0060] In one embodiment, the pointer in the outline frame is moved by adding animation effects in S140, including: setting animation attributes for the second hand, adding animation attributes for the minute hand, and adding animation attributes for the hour hand, so as to achieve animation effects for the second hand, the minute hand, and the hour hand.

[0061] It can be seen that all the styles of the clock are set in S110-S130, and S140 is to make the hour hand, minute hand and second hand move regularly. Here we need to use the animation technology provided by CSS3.

[0062] (1) For the second hand: It takes 60 seconds for the second hand to rotate once. It jumps once every second, a total of 60 times. One circle is 360 degrees, and each jump angle is 6 degrees. In order to achieve a more realistic effect, you can add a jitter effect to the second hand, that is, each time it jumps, it jumps 1 degree more and then returns to the normal position. So here we add the following animation properties to the second hand:

[0063] .second.hand

[0064] {animation:tick-second 1s normal infinite steps(30,end)1s;}

[0065] It can be seen that when adding animation properties, the step() function is used. The step() function is a running function, which means that the animation transition is divided into segments. There are two parameters in the step() function. 30 means that a 360-degree rotation is completed in 30 steps within 1 second, and end means that a step change occurs at the starting point or end point of each interval. The default is end.

[0066] In addition, you can set multiple keyframes, with 30 frames between keyframes. For example, each interval between 0-20%, 20%-30%, 30%-38% is a keyframe. Specifically, it is as follows: @keyframes tick-second{0%{transform:rotate(0deg)}20%{transform:rotate(5deg)}30%{transform:rotate(7deg)}38%{transform:rotate(5.5deg)}43%{transform:rotate(6deg)}100%{transform:rotate(6deg)}}.

[0067] Moreover, in order to maintain the continuity of the animation, you can set the animation-iteration-count property to define the number of times the animation is played. Specifically, it can be set to infinite, which means that the animation is repeated infinitely and the animation is executed in a loop.

[0068] (2) For the minute hand: Set one revolution as one cycle. One revolution per minute is one hour, or 3600 seconds. Set the following properties:

[0069] .minute.hand

[0070] {animation:tick 3600s normal infinite steps(3600,end)1s}

[0071] @keyframes tick{ / / @keyframes: define animation keyframes

[0072] 0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}

[0073] It can be seen that the keyframe interval set in the animation named tick is from 0 degrees to 360 degrees, and no other keyframes are retained in between. The entire animation process is: within 3600 seconds, the animation runs in an infinite loop forward for 3600 steps, that is, one step per second, and one tick per second.

[0074] (3) For the hour hand: The hour hand is similar to the minute hand. It rotates once in 12 hours, a total of 43,200 seconds. It also takes 3,600 steps, that is, one step every 12 seconds, that is, one jump every 12 seconds. Set the following properties:

[0075] .hour.hand

[0076] {animation:tick 43200s normal infinite steps(3600,end)1s}

[0077] At this point, a clock has been realized.

[0078] Based on the above clocks, certain extensions can be made, for example, setting the initial time, implementing the reversal function, achieving browser compatibility, etc.

[0079] The normal clock function may not meet the needs of daily work, and some functions can be expanded. For example, the initial time in the above style definition is 12:00:00, that is, the initial rotation angle of the hour hand, minute hand, and second hand is set by setting transform:rotate(0deg)) when setting the style. You can also change the initial time. As long as the initial rotation angle of the hour hand, minute hand, and second hand is set by transform:rotate, you can get a different initial time.

[0080] To achieve the countdown function by reversing the pointer, change all the angles in the tick and tick-second animation mentioned in the property settings above to negative numbers. For example, change transform:rotate(360deg) in @keyframestick to transform:rotate(-360deg).

[0081] The hour hand, minute hand and second hand in the clock configured above are all jumping, that is, frame by frame. You can also change it to continuous rotation. Just replace the steps() function in the animation properties of all the pointers mentioned above, set the property animation-timing-function: linear, that is, set the (animation execution effect to uniform speed, and then delete all the key frames in the middle of the second hand animation tick-second, leaving only 0% {transform:rotate(0deg)} and 100% {transform:rotate(6deg), so that it is replaced with a continuous and smooth rotation instead of a jumping effect. Of course, you can also use the Bezier curve function cubic-bezier() to customize the animation playback speed you want.

[0082] Browser compatibility: Due to different browser kernels, the writing methods for animations are also different when rendering. In order to ensure normal recognition between different browsers, the front-end often adds some identification marks of different browsers when writing styles. You can use the prefixes -webkit-, -moz-, -o-, and -ms-, and add them to the front of the animation attribute to achieve compatibility with various browsers. For example, add -webkit-, -moz-, -o-, and -ms- to the front of the following animation attribute definition:

[0083] -webkit-animation:tick 43200s normal infinite steps(3600,end)1s;

[0084] -moz-animation:tick 43200s normal infinite steps(3600,end)1s;

[0085] -o-animation:tick 43200s normal infinite steps(3600,end)1s;

[0086] -ms-animation:tick 43200s normal infinite steps(3600,end)1s.

[0087] It can be seen that, in one embodiment, the method may further include: setting an identification mark of the adapted browser when adding the animation attribute, so that the drawn clock is displayed on the adapted browser.

[0088] CSS, or Cascading Style Sheets, is a computer language used to express the styles of files such as HTML or XML. CSS can not only modify web pages statically, but also dynamically format the elements of web pages with various scripting languages. CSS3 is an upgraded version of CSS technology.

[0089] Among them, Animation technology refers to animation technology.

[0090] It can be seen that the present invention mainly uses CSS and animation technology to realize the drawing of clocks. First, the clock skeleton is simply built using the div tag of HTML. When building, it is necessary to pay attention to the hour hand, minute hand and second hand in the frame. Then the clock skeleton is refined by using the CSS style to complete a basic circular clock outline. Then the animation technology in CSS3 is used to make the static clock move. This method allows front-end developers to use HTML tags plus CSS3 to achieve clock effects, instead of using traditional HTML plus CSS plus JavaScript to achieve it.

[0091] The method of implementing clock animation by using CSS3 and animation technology in the embodiment of the present invention has the following advantages:

[0092] (1) No blocking, no frame loss: JS runs in the main thread of the browser, and there are other JS scripts, style calculations, layout, drawing tasks, etc. that need to be run in the main thread. Interference with the main thread may cause the thread to be blocked, resulting in frame loss. This solution uses CSS3 and animation technology to avoid these problems.

[0093] (2) Low development and maintenance costs: For low-version browsers with poor frame rate performance, CSS3 can achieve natural degradation, while JS requires writing additional code; this solution only needs to write animation properties when implementing a clock using CSS3, and the development and maintenance costs are low. The higher the browser frame rate, the clearer the picture, and the lower the frame rate, the blurrier the picture.

[0094] (3) Low performance consumption: JS animation often requires frequent manipulation of CSS attributes to achieve visual animation effects. At this time, the browser has to constantly perform redrawing and rearrangement, which consumes a lot of performance, especially on mobile terminals where the memory allocated to the browser is not so ample. However, the embodiment of the present invention uses CSS3 and animation technology, which does not require redrawing and rearrangement, and has low performance consumption.

[0095] (4) Good compatibility: The embodiments of the present invention can run well on various browsers and will not cause damage to the user's screen, data and other sensitive information.

[0096] (5) Reducing network traffic and page reload time: Compared with using traditional GIF animation or Flash animation, the clock animation implemented in the embodiment of the present invention requires smaller resource files and can avoid the production of a large number of images. This not only reduces network traffic, but also enables fast maintenance and display of page information.

[0097] (6) Improve the search ranking of the page: Using CSS3 and animation technology to add effects to the page can make it easier for users to identify and open the web page when using search engines, thereby improving the search ranking of the page.

[0098] In a second aspect, an embodiment of the present invention provides a clock drawing device, see Figure 5 , the device 100 comprises:

[0099] The outer frame realization module 110 is used to build the outline outer frame of the clock by using the segmentation mark tag of the hypertext markup language;

[0100] A scale realization module 120, for building a scale table in the outline frame using an unordered list tag and a list item tag of a hypertext markup language;

[0101] The pointer realization module 130 is used to realize the construction of corresponding pointers in the outline frame by setting the pointer style under the segmentation mark label; wherein the pointers include hour hand, minute hand and second hand;

[0102] The animation realization module 140 is used to realize the movement of the pointer in the outline frame by adding animation effects.

[0103] In one embodiment, the outer frame implementation module is specifically used to: define a first category named clock for the separation mark label, and configure the style information of the outline outer frame in the first category, the style information of the outline outer frame includes at least one of the position of the clock, the spacing of the outer frame of the clock, the width of the clock, the height of the clock, the inner margin of the clock, the border color of the clock, the border line of the clock, the border radius and the background color of the clock.

[0104] In one embodiment, the scale implementation module is specifically used to: define an unordered list tag with a class name of minute hand in the partition mark tag; set 30 list item tags in the unordered list tag, and define that one of every 5 list item tags has a tag with a class name of hour hand; define a scale for the front pseudo-class and the back pseudo-class of each list item tag, and obtain 60 scales; set the style of the 60 scales.

[0105] In one embodiment, the scale implementation module specifically implements setting the style of the 60 scales through the following steps: setting the list item label as an inline block element and displaying it in the center, and setting the width and height to the first preset pixel; determining the minute hand scale in the front pseudo-class and the back pseudo-class, and setting the length of the minute hand scale to the second preset pixel; determining the hour hand scale, and setting the length of the hour hand scale to the third preset pixel; the third preset pixel is greater than the second preset pixel; rotating each of the 60 scales by different angles through a rotation function, wherein the rotation angle of the i-th scale is (i-1)*6 degrees, and i is an integer in the range of [1,60].

[0106] In one embodiment, the pointer implementation module is specifically used to: define a second category named hour hand, a third category named minute hand, and a fourth category named second hand under the first category to obtain an hour hand label, a minute hand label, and a second hand label; define an hour hand style in the second category, a minute hand style in the third category, and a second hand style in the fourth category to implement style settings for the hour hand, minute hand, and second hand.

[0107] In one embodiment, the animation realization module is specifically used to: set animation attributes for the second hand, add animation attributes for the minute hand, and add animation attributes for the hour hand, so as to realize the animation effects of the second hand, the minute hand, and the hour hand.

[0108] In one embodiment, the device may further include:

[0109] The browser identification marking module is used to set the identification mark of the adapted browser when adding animation attributes, so that the drawn clock can be displayed on the adapted browser.

[0110] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0111] In a third aspect, an embodiment of the present invention provides a computer-readable medium, on which computer instructions are stored. When the computer instructions are executed by a processor, the processor executes the method provided in the first aspect.

[0112] Specifically, a system or device equipped with a storage medium can be provided, on which software program code that implements the functions of any of the above-mentioned embodiments is stored, and a computer (or CPU or MPU) of the system or device can read and execute the program code stored in the storage medium.

[0113] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0114] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer by a communication network.

[0115] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0116] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or to a memory provided in an expansion module connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or expansion module is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0117] It is understandable that the explanation, specific implementation methods, beneficial effects, examples, etc. of the relevant contents in the computer-readable medium provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0118] In a fourth aspect, an embodiment of the present specification provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, it implements the method in any embodiment of the specification.

[0119] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the computing device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0120] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0121] Those skilled in the art should be aware that in one or more of the above examples, the functions described in the present invention can be implemented by hardware, software, widgets, or any combination thereof. When implemented by software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or codes on a computer-readable medium.

[0122] The specific implementation methods described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific implementation method of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made on the basis of the technical solution of the present invention should be included in the scope of protection of the present invention.

Claims

1. A clock drawing method, characterized in that: include: Using the hypertext markup language segmentation tag to build the outline of the clock; Using unordered list tags and list item tags of hypertext markup language to build a scale table in the outline frame; By setting the pointer style under the segmentation mark label, a corresponding pointer is built in the outline frame; wherein the pointer includes an hour hand, a minute hand and a second hand; The pointer in the outline frame is moved by adding animation effects.

2. The method according to claim 1, characterized in that: The method of using the segmentation mark tag of the hypertext markup language to build the outline frame of the clock includes: A first category named clock is defined for the separation mark label, and style information of the outline frame is configured in the first category, wherein the style information of the outline frame includes at least one of the position of the clock, the spacing of the outer frame of the clock, the width of the clock, the height of the clock, the inner margin of the clock, the border color of the clock, the border line of the clock, the border radius and the background color of the clock.

3. The method according to claim 2, characterized in that The unordered list tag and the list item tag using the hypertext markup language are used to build a scale table in the outline frame, including: In the separator mark tag, define an unordered list tag with a class name of minute hand; Set 30 list item tags in the unordered list tag, define that one of every 5 list item tags has a tag with a class name of hour hand; define that the front pseudo-class and the back pseudo-class of each list item tag are both set with a scale, and 60 scales are obtained; set the styles of the 60 scales.

4. The method according to claim 3, characterized in that The setting of the styles of the 60 scales includes: Set the list item label as an inline block element and display it in the center, and set the width and height to the first preset pixel; determine the minute hand scale in the front pseudo-class and the back pseudo-class, and set the length of the minute hand scale to the second preset pixel; determine the hour hand scale, and set the length of the hour hand scale to the third preset pixel; the third preset pixel is greater than the second preset pixel; Each of the 60 scales is rotated by a different angle through a rotation function, where the rotation angle of the i-th scale is (i-1)*6 degrees, and i is an integer in the range of [1,60].

5. The method according to claim 2, characterized in that: The setting of the pointer style under the segmentation mark tag to achieve the construction of a corresponding pointer in the outline frame includes: Under the first category, a second category named hour hand, a third category named minute hand and a fourth category named second hand are defined to obtain hour hand label, minute hand label and second hand label; the hour hand style is defined in the second category, the minute hand style is defined in the third category and the second hand style is defined in the fourth category to implement the style setting of the hour hand, minute hand and second hand.

6. The method according to claim 1, characterized in that The method of adding an animation effect to achieve movement of the pointer in the outline frame includes: Animation properties are set for the second hand, animation properties are added for the minute hand, and animation properties are added for the hour hand, so as to achieve animation effects of the second hand, the minute hand, and the hour hand.

7. The method according to claim 6, characterized in that Also includes: When adding the animation attribute, the identification mark of the adapted browser is also set so that the drawn clock can be displayed on the adapted browser.

8. A clock drawing device, characterized in that: include: The outer frame realization module is used to build the outline outer frame of the clock by using the segmentation mark tag of the hypertext markup language; A scale realization module, used for building a scale table in the outline frame by using an unordered list tag and a list item tag of a hypertext markup language; A pointer realization module, used to realize the construction of corresponding pointers in the outline frame by setting the pointer style under the segmentation mark label; wherein the pointers include hour hand, minute hand and second hand; The animation realization module is used to realize the movement of the pointer in the outline frame by adding animation effects.

9. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed in a computer, the computer is caused to execute the method according to any one of claims 1 to 7.

10. A computing device, characterized in that: The method comprises a memory and a processor, wherein the memory stores executable codes, and when the processor executes the executable codes, the method according to any one of claims 1 to 7 is implemented.

Images