Webpage digital dynamic adaptation display method and device

Abstract

The invention relates to the technical field of HTML (Hypertext Markup Language) webpage visualization, in particular to a webpage digital dynamic adaptation display method and device, which comprises the following steps of: S1, configuring a digital order of magnitude and a corresponding unit list TABLEordercount; s2, obtaining a number to be displayed and related data information; s3, utilizing a method for calculating a specified digital width; s4, the size of the HTML label width WIDTHcontroller corresponding to the container of the number to be displayed is compared with the size of the width WIDTHorigin of the number NUMBERorigin to be displayed, and the size of the HTML label width WIDTHcontroller corresponding to the container of the number to be displayed is compared with the size of the width WIDTHorigin of the number NUMBERorigin to be displayed; s5, the order of magnitude ORDER of the number NUMBERorigin to be displayed is calculated; s6, carrying out corresponding unit matching on the order of magnitude ORDER of the number NUMBERorigin to be displayed, the order of magnitude of the configured number and the corresponding unit list TABLEordercount, and carrying out corresponding unit matching on the order of magnitude ORDER of the number NUMBERorigin to be displayed and the order of magnitude of the configured number; s7, setting a monitor; s8, generating an NUMBER (Non-Unified Model Binary Error) matrix; and S9, rendering and displaying the constructed NUMBERnew in a container of a to-be-displayed number on the webpage. Compared with the prior art, a more efficient, convenient and comfortable webpage browsing process can be brought to a user.

Description

Technical Field

[0001] The present invention relates to the technical field of HTML web page visualization, and specifically provides a method and device for dynamically adapting and displaying web page numbers. Background Art

[0002] With the development of technology, HTML web page visualization has become a main means of displaying data information. Among them, numbers play an important role in the form of basic data information. However, due to the uncertain length of numbers and the existence of various digital formats, it is difficult to maintain a good and appropriate display when they are displayed on web pages of different sizes.

[0003] It may cause incomplete display or deformation of numbers due to web page size limitations, and cannot provide a good and consistent visual experience and operation experience for web page users. Summary of the Invention

[0004] The present invention aims at the deficiencies of the above-mentioned prior art and provides a method for dynamically adapting and displaying web page numbers with strong practicability.

[0005] A further technical task of the present invention is to provide a web page number dynamic adaptation display device with reasonable design, safety and applicability.

[0006] The technical solution adopted by the present invention to solve its technical problems is as follows:

[0007] The method for dynamically adapting and displaying web page numbers has the following steps:

[0008] S1. Configure a list TABLE of digital orders of magnitude and corresponding units ordertounit ;

[0009] S2. Obtain the number to be displayed and related data information;

[0010] S3. Calculate the width WIDTH of the number NUMBER to be displayed obtained from the CSS style attribute STYLE set for the number to be displayed on the web page obtained in step S2 original ; original ;

[0011] S4. Compare the width WIDTH of the HTML tag corresponding to the container of the number to be displayed on the web page obtained in step S2 container with the width WIDTH of the number NUMBER to be displayed calculated in step S3 original ; original of the number size;

[0012] S5. Calculate the order of magnitude ORDER of the number NUMBER to be displayed obtained in step S2 original ;

[0013] S6. Match the order of magnitude ORDER of the number NUMBER obtained in step S5 with the order of magnitude and corresponding unit list TABLE in step S1 original for corresponding unit matching; ordertounit

[0014] S7. Set up a listener;

[0015] S8. Adapt the number NUMBER obtained in step S2 original to generate NUMBER matched ;

[0016] S9. Calculate and construct a new display number NUMBER new and render and display the constructed NUMBER in the container for the number to be displayed on the web page new .

[0017] Furthermore, in step S2, it specifically includes: the number NUMBER to be displayed original , the width WIDTH of the HTML tag corresponding to the container for the number to be displayed on the web page container and the CSS style attribute STYLE set for the number to be displayed on the web page.

[0018] Furthermore, in step S3, the specific steps are as follows:

[0019] S3-1. Use the HTML tag span to generate a hidden temporary container for calculating the width of the number. The CSS of the temporary container is set to the CSS style attribute STYLE of the number to be displayed on the web page obtained in step S2;

[0020] S3-2. Load the number whose width needs to be calculated into the temporary container;

[0021] S3-3. Use the HTML DOM interface getComputedStyle to calculate and output the width of the temporary container;

[0022] S3-4. Destroy and clean up the temporary container.

[0023] Furthermore, in step S4, if WIDTH container is greater than or equal to WIDTH original , then render and display NUMBER original in the container for the number to be displayed on the web page; otherwise, perform step S5.

[0024] Furthermore, in step S5, the basic calculation formula is:

[0025] NUMBER order = NUMBER​order ÷10

[0026] The specific calculation steps are as follows:

[0027] (1) Set the initial value of ORDER to 0;

[0028] (2) Set the temporary value NUMBER order , with the initial value being the absolute value of NUMBER original ;

[0029] (3) Apply the basic calculation formula to calculate NUMBER order , and increment the value of ORDER by 1;

[0030] (4) Compare the size of NUMBER order with 10. If NUMBER order is not less than 10, then repeat steps (3) and (4); otherwise, end the calculation steps and output ORDER.

[0031] Furthermore, in step S6, if the match fails, then render and display NUMBER in an abbreviated form in the container of the number to be displayed on the web page original ;

[0032] Otherwise, set the matched unit to NUMBER unit , and continue with step S8.

[0033] Furthermore, in step S7, obtain the width WIDTH of the HTML tag corresponding to the container of the number to be displayed on the web page container dimension change. When it is monitored that the WIDTH container dimension changes, re-obtain the width WIDTH of the HTML tag corresponding to the container of the number to be displayed on the web page container , and perform step S8.

[0034] Furthermore, in step S8, the specific steps are as follows:

[0035] a. Use the method of calculating the width of the specified number described in step S3 to calculate the width WIDTH unit of the unit NUMBER obtained by matching in the CSS style attribute STYLE set for the number to be displayed on the web page obtained in step S2 unit ;

[0036] b. Calculate the width WIDTH of the adapted number matched , and the calculation formula is:

[0037] WIDTH matched = WIDTH container - WIDTHunit ;

[0038] c. Initialize the temporary value NUMBER for calculating the adapted number temp , and the calculation formula is:

[0039] NUMBER temp = NUMBER original ÷ 10 ORDER ;

[0040] d. Use the method described in step S3 for calculating the width of the specified number to calculate the width WIDTH of the temporarily obtained NUMBER for the CSS style attribute STYLE set for the number to be displayed on the web page obtained in step S2 temp of the number temp ;

[0041] e. Compare the width WIDTH of the adapted number calculated in step (2) matched with the WIDTH calculated in step (4) temp in size. If WIDTH temp is greater than WIDTH matched , then recalculate NUMBER temp , and the calculation formula is:

[0042] NUMBER temp = NUMBER temp Remove the last digit and round the value;

[0043] And repeat steps d and e;

[0044] Otherwise, end the adaptation step and calculate and generate NUMBER matched , and the calculation formula is:

[0045] NUMBER matched = NUMBER temp .

[0046] Furthermore, in step S9, calculate and construct the new displayed number NUMBER new , and the calculation formula is:

[0047] NUMBER new = NUMBER matched + NUMBER unit ;

[0048] Render and display the calculated and constructed NUMBER in the container of the number to be displayed on the web page new .

[0049] A web page digital dynamic adaptation display device, comprising: at least one memory and at least one processor;

[0050] The at least one memory is used for storing machine-readable programs;

[0051] The at least one processor is used for calling the machine-readable program and executing any one of the methods in the claimed web page digital dynamic adaptation display method.

[0052] Compared with the prior art, the web page digital dynamic adaptation display method and device of the present invention have the following prominent beneficial effects:

[0053] The present invention realizes the dynamic adaptation and display of numbers for web pages of different sizes through data configuration. In today's diverse device screen sizes, web page display faces many challenges, and the present invention effectively solves the problem of digital display. Through data configuration and dynamic adaptation mechanism, numbers can be dynamically displayed flexibly according to web pages of different sizes. It ensures the integrity of digital display and will not be truncated due to length problems. At the same time, it highly guarantees the accuracy of numbers and avoids incorrect display of numbers caused by improper adaptation.

[0054] For web page users, the present invention greatly improves the use experience. No matter which device is used to access the web page, users can enjoy a good and consistent visual experience and operation experience, and will no longer be troubled by digital display problems, bringing a more efficient, convenient and comfortable web browsing process for users. BRIEF DESCRIPTION OF THE DRAWINGS

[0055] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0056] Attached Figure 1 is a flowchart of a web page digital dynamic adaptation display method;

[0057] Attached Figure 2 is a flowchart of calculating the width of a specified number in a web page digital dynamic adaptation display method. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0058] To enable those skilled in the art to better understand the solution of the present invention, the present invention will be further described in detail below in conjunction with specific embodiments. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative work fall within the scope of protection of the present invention.

[0059] The following gives an optimal embodiment:

[0060] As Figure 1 shown, the method for dynamically adapting and displaying web page numbers in this embodiment has the following steps:

[0061] S1. Configure a list TABLE of digital orders of magnitude and corresponding units ordertounit ;

[0062] TABLE ordertounit The specific content is:

[0063]

[0064]

[0065] S2. Obtain the number to be displayed and relevant data information;

[0066] Specifically, it includes: the number to be displayed NUMBER original , the width WIDTH of the HTML tag corresponding to the container for the number to be displayed on the web page container , and the CSS style attribute STYLE set for the number to be displayed on the web page.

[0067] S3. Use the method for calculating the width of a specified number to calculate the width WIDTH of the number to be displayed NUMBER obtained in step S2 from the CSS style attribute STYLE set for the number to be displayed on the web page original ; original ;

[0068] The method for calculating the width of a specified number is as follows:

[0069] S3-1. Use the HTML tag span to generate a hidden temporary container for calculating the width of the number, and the CSS of the temporary container is set to the CSS style attribute STYLE obtained in step S2 for the number to be displayed on the web page;

[0070] S3-2. Load the number whose width needs to be calculated into the temporary container;

[0071] S3-3. Use the DOM interface getComputedStyle of HTML to calculate and output the width of the temporary container;

[0072] S3 - 4. Destroy and clean the temporary container.

[0073] S4. Compare the HTML tag width WIDTH of the container for the number to be displayed on the web page obtained in step S2 container with the width WIDTH of the number NUMBER original calculated in step S3; original for the number size;

[0074] If WIDTH container is greater than or equal to WIDTH original , render and display NUMBER in the container for the number to be displayed on the web page original ;

[0075] Otherwise, proceed to step S5.

[0076] S5. Calculate the order of magnitude ORDER of the number NUMBER original obtained in step S2;

[0077] The basic calculation formula is:

[0078] NUMBER order = NUMBER order ÷ 10

[0079] The specific calculation steps are as follows:

[0080] (1) Set the initial value of ORDER to 0;

[0081] (2) Set the temporary value NUMBER order , with the initial value taken as the absolute value of NUMBER original ;

[0082] (3) Apply the basic calculation formula to calculate NUMBER order , and increment the value of ORDER by 1;

[0083] (4) Compare NUMBER order with 10. If NUMBER order is not less than 10, repeat steps (3) and (4); otherwise, end the calculation steps and output ORDER.

[0084] S6. Match the order of magnitude ORDER of the number NUMBER original calculated and obtained in step S5 with the list TABLE ordertounit of the configured number order of magnitude and corresponding units in step S1;

[0085] If the match fails, render and display NUMBER in an abbreviated form in the container for the number to be displayed on the web page original ;

[0086] Otherwise, set the matched unit to NUMBER unit , and continue with step S8.

[0087] S7. Set up a listener;

[0088] Listen for the width WIDTH of the HTML tag corresponding to the container for the number to be displayed on the retrieved web page container to change. When it is detected that WIDTH container has changed, retrieve the width WIDTH of the HTML tag corresponding to the container for the number to be displayed on the web page again container , and perform step S8.

[0089] S8. Adapt the number NUMBER retrieved in step S2 original to generate NUMBER matched ;

[0090] The specific steps are as follows:

[0091] a. Use the method described in step S3 for calculating the width of a specified number to calculate the width WIDTH unit of the unit NUMBER matched and retrieved in the CSS style attribute STYLE set for the number to be displayed on the web page retrieved in step S2 unit ;

[0092] b. Calculate the width WIDTH matched of the adapted number, and the calculation formula is:

[0093] WIDTH matched = WIDTH container - WIDTH unit ;

[0094] c. Initialize the temporary value NUMBER temp for calculating the adapted number, and the calculation formula is:

[0095] NUMBER temp = NUMBER original ÷ 10 ORDER ;

[0096] d. Use the method described in step S3 for calculating the width of a specified number to calculate the width WIDTH temp of the temporary value NUMBER of the adapted number calculated and retrieved in the CSS style attribute STYLE set for the number to be displayed on the web page retrieved in step S2 temp;

[0097] e. Compare the width WIDTH of the adapted number obtained in step (2) matched with the WIDTH obtained in step (4) temp in size. If WIDTH temp is greater than WIDTH matched , recalculate NUMBER temp , and the calculation formula is:

[0098] NUMBER temp = Remove the last digit of NUMBER temp , and round the value;

[0099] And repeat steps d and e;

[0100] Otherwise, end the adaptation step and calculate and generate NUMBER matched , and the calculation formula is:

[0101] NUMBER matched = NUMBER temp .

[0102] S9. Calculate and construct a new display number NUMBER new , and render and display the constructed NUMBER in the container of the number to be displayed on the web page new ;

[0103] Calculate and construct a new display number NUMBER new , and the calculation formula is:

[0104] NUMBER new = NUMBER matched + NUMBER unit ;

[0105] Render and display the calculated and constructed NUMBER in the container of the number to be displayed on the web page new .

[0106] Based on the above method, the web page digital dynamic adaptation display device in this embodiment includes: at least one memory and at least one processor;

[0107] The at least one memory is used to store machine-readable programs;

[0108] The at least one processor is used to call the machine-readable program and execute any of the methods in the web page digital dynamic adaptation display method of the claims.

[0109] The above specific embodiments are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above specific embodiments. Any technical solution that conforms to the above specific embodiments of the present invention and any appropriate changes or substitutions made by any person of ordinary skill in the relevant technical field shall fall within the patent protection scope of the present invention.

[0110] Although the embodiments of the present invention have been shown and described, those of ordinary skill in the art can understand that various changes, modifications, substitutions, and variations can be made to these embodiments without departing from the principles and spirit of the present invention. The scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for dynamically adapting and displaying digital web pages, characterized in that: The steps are as follows: S1. Configure the digital magnitude and corresponding unit list TABLE ordertounit ; S2, obtaining the numbers to be displayed and related data information; S3, calculating the number NUMBER to be displayed obtained from the CSS style attribute STYLE set for the number to be displayed on the web page obtained in step S2 original Width original ; S4: Compare the HTML tag width WIDTH corresponding to the container of the number to be displayed on the web page obtained in step S2 container The number NUMBER to be displayed calculated in step S3 original Width original The size of the number; S5. Calculate the number NUMBER to be displayed obtained in step S2 original ORDER of magnitude; S6: The number NUMBER to be displayed obtained by calculation in step S5 original The order of magnitude ORDER and the configuration in step S1 are listed in the table with the corresponding units ordertounit Match the corresponding units; S7, set the listener; S8, the number to be displayed NUMBER obtained in step S2 original Adapt and generate NUMBER matched ; S9. Calculate and construct a new display number NUMBER new , render the constructed NUMBER in the container of the number to be displayed on the web page new .

2. The method for dynamically adapting and displaying webpage numbers according to claim 1, characterized in that: In step S2, specifically including: the number to be displayed NUMBER Roriginal , the width of the HTML tag corresponding to the container of the number to be displayed on the web page WIDTH container And the CSS style attribute STYLE set for the numbers to be displayed on the web page.

3. The method for dynamically adapting and displaying webpage numbers according to claim 2, characterized in that: In step S3, the specific steps are: S3-1, using the HTML tag span, generating a hidden temporary container for calculating the width of the number, the CSS of the temporary container is set to the CSS style attribute STYLE set for the number to be displayed on the web page obtained in step S2; S3-2. The width of temporary containers needs to be calculated; S3-3. Use HTML DOM interface getComputedStyle to calculate and output the width of the temporary container; S3-4. Destroy and clean up the temporary container.

4. The method for dynamically adapting and displaying webpage numbers according to claim 3, characterized in that: In step S4, if WIDTH container Greater than or equal to WIDTH original , then NUMBER is rendered in the container of the number to be displayed on the web page original ; Otherwise, proceed to step S5.

5. The method for dynamically adapting and displaying webpage numbers according to claim 4, characterized in that: In step S5, the basic calculation formula is: NUMBER order =NUMBER order ÷10 The specific calculation steps are: (1) Set the initial value of ORDER to 0; (2) Set the temporary value NUMBER order , the initial value is NUMBER original The absolute value of (3) Apply the basic calculation formula to calculate NUMBER order , ORDER value is incremented by 1; (4) Compare NUMBER order With size 10, if NUMBER order If it is not less than 10, repeat steps (3) and (4); otherwise, end the calculation step and output ORDER.

6. The method for dynamically adapting and displaying webpage numbers according to claim 5, characterized in that: In step S6, if the match fails, NUMBER is rendered in an abbreviated form in the container of the number to be displayed on the web page. original ; Otherwise, set the matched unit to NUMBER unit , proceed to step S8.

7. The method for dynamically adapting and displaying webpage numbers according to claim 6, characterized in that: In step S7, the HTML tag width WIDTH corresponding to the container of the number to be displayed on the web page is obtained. container Size changes, when listening to WIDTH container When the size changes, the width of the HTML tag corresponding to the container of the number to be displayed on the web page is retrieved. container , and proceed to step S8.

8. The method for dynamically adapting and displaying webpage numbers according to claim 6, characterized in that: In step S8, the specific steps are: a. Using the method for calculating the width of a specified number described in step S3, calculate the unit NUMBER obtained by matching the CSS style attribute STYLE set for the number to be displayed on the web page obtained in step S2 unit Width unit ; b. Calculate the width of the adapted number WIDTH matched , the calculation formula is: WIDTH matched =WIDTH container -WIDTH unit ; c. Initialize the temporary value NUMBER to calculate the adaptation number temp , the calculation formula is: NUMBER temp =NUMBER original ÷10 ORDER ; d. Using the method for calculating the width of the specified number described in step S3, calculate the temporary value NUMBER of the adapted number in the CSS style attribute STYLE set for the number to be displayed on the web page obtained in step S2. temp Width temp ; e. Compare the width WIDTH of the adaptation number calculated in step (2) matched and WIDTH calculated in step (4) temp Size, if WIDTH temp Greater than WIDTH matched , then recalculate NUMBER temp , the calculation formula is: NUMBER temp =NUMBER temp Remove the last digit and round the value; And repeat step d and step e; Otherwise, end the adaptation step and calculate the generated NUMBER matched , the calculation formula is: NUMBER matched =NUMBER temp 。 9. The method for dynamically adapting and displaying webpage numbers according to claim 8, characterized in that: In step S9, a new display number NUMBER is calculated and constructed. new , the calculation formula is: NUMBER new =NUMBER matched +NUMBER unit ; Render the calculated NUMBER in the container of the number to be displayed on the web page new .

10. A webpage digital dynamic adaptation display device, characterized in that: include: at least one memory and at least one processor; The at least one memory is used to store a machine-readable program; The at least one processor is configured to call the machine-readable program to execute the method according to any one of claims 1 to 9.

Images