Implementation method for fast switching time of Web date component

Abstract

The invention relates to an implementation method for quickly switching time of a Web date component, in particular to the field of time processing, which comprises the following steps of: creating a time panel comprising four buttons and three sensing areas, improving maintainability and readability, creating variables to store the current year and month, and automatically triggering year and month switching operation; the reference of each sensing area is obtained, the clickHandler () method is utilized to switch into a manual switching mode, the clickCount () function is utilized to define variable tracking click times and switching times, and the month is switched, so that the switching operation can adapt to the operation habit of a user within a certain range; the method comprises the following steps: setting a width fixed pixel and a height fixed pixel of each date block in a time panel and a fixed height and a fixed width of each time panel, adding a mouse hovering event and monitoring a click event through JavaScript by utilizing an addEventListener () method, carrying out date block position positioning by constructing a coordinate system, judging mouse operation to carry out page turning switching operation, and carrying out page turning switching operation on the date blocks. And user interaction requirements are comprehensively considered.

Description

Technical Field

[0001] The present invention relates to the field of time processing, and more specifically, to a method for implementing fast time switching of a Web date component. Background Art

[0002] Currently in Web development, the date component is one of the common UI elements in Web development. It plays a key role in improving user experience and interactivity. With the continuous pursuit of interactivity and user experience by users, the importance of the date component has become increasingly prominent. The date component not only simplifies the user input process, but also provides a unified and intuitive interface, allowing users to easily select the required date and time.

[0003] Traditional date pickers perform well in providing basic date selection functions, but have some shortcomings in user experience. When dates need to be switched quickly, traditional date pickers appear clumsy and inefficient. Traditional date pickers use a calendar view, and users need to select dates one by one by clicking on the calendar. This is effective for selecting specific dates, but for users who need to switch dates quickly, the operation is cumbersome and unintuitive. Users need to click multiple times to find the required date, which reduces operational efficiency.

[0004] The interaction method of traditional date pickers is relatively limited. Users can only select dates by clicking on the calendar, and cannot quickly jump or switch date ranges.

[0005] Therefore, there is an urgent need for a method for implementing a Web date component to quickly switch time to solve the shortcomings in user experience and improve user experience and operation efficiency to meet the growing needs of users. Summary of the invention

[0006] The present invention aims at the technical problems existing in the prior art and provides a method for realizing fast switching time of a Web date component to solve the problems raised in the above background technology.

[0007] The technical solution of the present invention to solve the above technical problem is as follows: a method for implementing a fast switching time of a Web date component, comprising the following steps:

[0008] S101. Create a time panel containing 4 buttons and 3 sensing areas, create variables to store the current year and month, and use the setInterval() function to set the first timer to automatically trigger the switching of the year and month;

[0009] S102. Get the reference of each sensing area and use the clickHandler() method to stop the automatic switching and switch to the manual switching mode, use the clickCount() function to define variables to track the number of clicks and switching times and set the second counter to switch the month, and provide continuous click support, create a variable to store the reference of the second timer;

[0010] S103. Set the width and height of each date block in the time panel to fixed pixels, and the fixed height and width of each time panel, and calculate the heights of the two areas A and C and the width of the area B;

[0011] S104. Use the addEventListener() method in JavaScript to add a mouse hover event and listen for a click event, locate the date block by constructing a coordinate system, and determine the mouse operation to perform a page switching operation;

[0012] In a preferred embodiment, in S101, a time panel containing 4 buttons is created and the buttons are contained by using the HTML div element, a reference to the button function is added to the time panel, a reference to each button element is obtained by using the document.getElementById() selector method through JavaScript, the addEventListener() method is used to listen to click events and define an event handler, wherein the event handler is: using the change function to switch the year and month, and using the update function to update the currently displayed year and month according to the button type.

[0013] Furthermore, a time panel with three perception areas is created using a div element, where the three areas are named A, B, and C, and the same class name is assigned to each perception area, and CSS is used to add styles to the perception area.

[0014] Furthermore, create variables to store the current year and month and initialize them to the current year and month, use the setInterval() function to set the first timer, and initialize the time interval to 2 seconds. By increasing the value of the current year and month and resetting the value to 1 when it reaches 12, switch to the next year and month in the callback function of the first timer, set the first counter to monitor and record the number of consecutive switches, and increase the value of the first counter within 6 seconds during the continuous switching time. It is stipulated that after the year and month are switched continuously for more than 3 times, the interval time will be shortened by 1 / 2 each time, and will no longer be shortened after 0.5 seconds.

[0015] In a preferred embodiment, in S102, the reference of each perception area is obtained by JavaScript using the selector method of document.getElementById(), the automatic switching is stopped using the clickHandler() method, and the manual switching mode is entered, the event listener is added using the addEventListener() method and the event handler is defined, the clickCount() function is used to define variables to track the number of clicks and switches and set a second counter, the second counter is connected to the click event listener of the perception area, the month is switched according to the value of the second counter and continuous click support is provided.

[0016] Furthermore, a variable is created to store a reference to the second timer, and the mouse position detection logic is added through the isMouseInArea() function to determine whether the mouse is in the perception area. The function returns true to indicate that the mouse is in the perception area, and returns false to indicate that the mouse is not in the perception area. If it is determined that the mouse is in the perception area, the second timer is started for automatic timing and the time interval is reset to 2 seconds. Automatic switching will be retriggered after 2 seconds.

[0017] In a preferred embodiment, in S103, the width of each date block in the time panel is set to be fixed to w pixels and the height is set to be fixed to h pixels, and the height of each time panel is fixed to 7 rows and the width is fixed to 7 columns. The width of the two areas A and C is set to 20 pixels using CSS, and the height of the two areas A and C is set to be consistent with the height of the date body content. The specific formula for calculating the height is:

[0018] H A、C =w*7

[0019] Among them, H A、C Indicates the height of the two areas A and C, w indicates the fixed width of each date block, sets the height of area B to 20 pixels, and sets the width of area B to be consistent with the width of the date body content. The specific formula for calculating the width is:

[0020]

[0021] Among them, W B Indicates the width of area B, and w indicates the fixed width of each date block.

[0022] In a preferred embodiment, in S104, the addEventListener() method is used through JavaScript to add a mouse hover event and listen for click events. The date block is located in the order from top to bottom and from left to right by constructing a coordinate system. If the date block is later in the time panel, on the right and bottom, the current date does not meet the requirements and needs to be turned back. If the current position of the mouse is close to areas B and C, it is determined that the mouse is in a suspended or clicked operation, and the switching operation of turning the page back is triggered. If the date block is later in the time panel, on the left and top, the current date does not meet the requirements and needs to be turned forward. If the current position of the mouse is close to area A, it is determined that the mouse is in a suspended or clicked operation, and the switching operation of turning the page forward is triggered.

[0023] The beneficial effects of the present invention are as follows: by using div elements to organize buttons and perception areas, maintainability and readability are improved, the naming and functions of buttons are clearly explained, by describing the creation and style design of perception areas, it is emphasized that the same style is applied with the same class name to improve the maintainability of the code, the processing time switching logic provides clear steps and logic, a counter is used to effectively manage the number of continuous switching, and the trigger interval of the timer is adjusted according to the number of switching times, so that the switching operation can adapt to the user's operating habits within a certain range, by detecting mouse hover and click events and triggering the page switching operation according to the mouse position, the user interaction needs are comprehensively considered, and the operation steps are associated by judging the logic to avoid functional confusion. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 is a flow chart of the method of the present invention;

[0025] Figure 2 This is the time panel, button, and perception area distribution diagram of the present invention; DETAILED DESCRIPTION

[0026] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0027] In the description of this application, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of this application, "plurality" means two or more, unless otherwise clearly and specifically defined.

[0028] In the description of the present application, the term "for example" is used to mean "used as an example, illustration or description". Any embodiment described as "for example" in the present application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is given to enable any technician in the field to implement and use the present invention. In the following description, details are listed for the purpose of explanation. It should be understood that a person of ordinary skill in the art can recognize that the present invention can be implemented without using these specific details. In other examples, well-known structures and processes will not be elaborated in detail to avoid unnecessary details to obscure the description of the present invention. Therefore, the present invention is not intended to be limited to the embodiments shown, but is consistent with the widest scope consistent with the principles and features disclosed in the present application.

[0029] This embodiment provides Figure 1 A method for implementing a fast time switching of a Web date component is shown, which specifically includes the following steps:

[0030] S101. Create a time panel containing 4 buttons and 3 sensing areas, create variables to store the current year and month, and use the setInterval() function to set the first timer to automatically trigger the switching of the year and month;

[0031] Furthermore, a time panel containing 4 buttons is created and the buttons are contained by using the div element of HTML, where the 4 buttons are named D, E, F, and G. A reference to the button function is added to the time panel to switch the year and month, where buttons F and D are used to switch the year, and buttons G and E are used to switch the month. The reference of each button element is obtained by using the selector method of document.getElementById() through JavaScript, and the addEventListener() method is used to listen to click events and define an event handler, wherein the event handler is: using the change function to switch the year and month, and using the update function to update the currently displayed year and month according to the button type.

[0032] Furthermore, a time panel with three perception areas is created using div elements. The three areas are named A, B, and C, and the same class name is assigned to each perception area. The same class name applies the same style to all perception areas to improve the maintainability of the code. CSS is used to add styles to the perception areas, including width, height, background color, borders, margins, inline-block elements, and pointer styles. The margins are used to increase the spacing between perception areas, and inline-block elements are used to arrange the perception areas horizontally.

[0033] Furthermore, create variables to store the current year and month and initialize them to the current year and month, use the setInterval() function to set the first timer with an initialization time interval of 2 seconds to trigger the year and month switching operation, increase the value of the current year and month and reset the value to 1 when it reaches 12 to switch to the next year and month in the callback function of the first timer, set the first counter to monitor and record the number of consecutive switching times, increase the value of the first counter within 6 seconds during the consecutive switching time, and stipulate that after the year and month are switched continuously for more than 3 times, the interval time is shortened by 1 / 2 each time, and will no longer be shortened after 0.5 seconds.

[0034] S102. Get the reference of each sensing area and use the clickHandler() method to stop the automatic switching and switch to the manual switching mode, use the clickCount() function to define variables to track the number of clicks and switching times and set the second counter to switch the month, and provide continuous click support, create a variable to store the reference of the second timer;

[0035] Furthermore, JavaScript uses the document.getElementById() selector method to obtain a reference to each perception area, uses the clickHandler() method to stop automatic switching and switch to manual switching mode, uses the addEventListener() method to add an event listener and define an event handler, uses the clickCount() function to define variables to track the number of clicks and switches and set a second counter. Each time the user clicks, the value of the second counter is increased, and the second counter is connected to the click event listener of the perception area. The month is switched according to the value of the second counter and continuous click support is provided to ensure that the number of switches is consistent with the number of clicks.

[0036] Furthermore, a variable is created to store a reference to the second timer, and the mouse position detection logic is added through the isMouseInArea() function to determine whether the mouse is in the perception area. The function returns true to indicate that the mouse is in the perception area, and returns false to indicate that the mouse is not in the perception area. If it is determined that the mouse is in the perception area, the second timer is started for automatic timing and the time interval is reset to 2 seconds. Automatic switching will be retriggered after 2 seconds.

[0037] S103. Set the width and height of each date block in the time panel to fixed pixels, and the fixed height and width of each time panel, and calculate the heights of the two areas A and C and the width of the area B;

[0038] Furthermore, the width of each date block in the time panel is set to w pixels and the height is set to h pixels, and the height of each time panel is fixed to 7 rows and 7 columns. Use CSS to set the width of the A and C areas to 20 pixels, and set the height of the A and C areas to be consistent with the height of the date body content. The specific formula for calculating the height is:

[0039] H A、C =w*7

[0040] Among them, H A、C Indicates the height of the two areas A and C, w indicates the fixed width of each date block, sets the height of area B to 20 pixels, and sets the width of area B to be consistent with the width of the date body content. The specific formula for calculating the width is:

[0041]

[0042] Among them, W B Indicates the width of area B, and w indicates the fixed width of each date block.

[0043] S104. Use the addEventListener() method in JavaScript to add a mouse hover event and listen for a click event, locate the date block by constructing a coordinate system, and determine the mouse operation to perform a page switching operation;

[0044] Furthermore, the addEventListener() method is used through JavaScript to add a mouse hover event and listen for click events. According to the order in which the date blocks are arranged from top to bottom and from left to right, the date block position is located by constructing a coordinate system, including the position of the current date and the positions near the upper left and lower right areas, wherein the internal focus of areas A and B is used as the origin of the coordinate system, the height of area A is used as the y-axis, and the width of area B is used as the x-axis. If the date block is located to the right and bottom of the time panel, the current date does not meet the requirements and needs to be turned back. If the current position of the mouse is detected to be close to areas B and C, it is determined that the mouse is suspended or clicked, and the switching operation of turning back the page is triggered. If the date block is located to the left and top of the time panel, the current date does not meet the requirements and needs to be turned forward. If the current position of the mouse is detected to be close to area A, it is determined that the mouse is suspended or clicked, and the switching operation of turning forward the page is triggered.

[0045] It should be noted that in the above embodiments, the description of each embodiment has its own emphasis, and for parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0046] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0047] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded computer, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0048] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0049] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0050] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0051] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A method for implementing a fast switching time of a Web date component, characterized in that: The specific steps include: S101. Create a time panel containing 4 buttons and 3 sensing areas, create variables to store the current year and month, and use the setInterval() function to set the first timer to automatically trigger the switching of the year and month; S102. Get the reference of each sensing area and use the clickHandler() method to stop the automatic switching and switch to the manual switching mode, use the clickCount() function to define variables to track the number of clicks and switching times and set the second counter to switch the month, and provide continuous click support, create a variable to store the reference of the second timer; S103. Set the width and height of each date block in the time panel to fixed pixels, and the fixed height and width of each time panel, and calculate the heights of the two areas A and C and the width of the area B; S104. Using JavaScript to use the addEventListener() method to add a mouse hover event and listen for click events, locate the date block by building a coordinate system, and determine the mouse operation to perform page switching operations.

2. A method for implementing a fast switching time of a Web date component according to claim 1, characterized in that: In the S101, a time panel including four buttons is created and the buttons are contained by the div element of HTML, a reference to each button element is obtained by the selector method of document.getElementById() through JavaScript, click events are monitored by the addEventListener() method, a time panel of three perception areas is created by the div element, the same class name is assigned to each perception area, variables are created to store the current year and month, a first timer is set by the setInterval() function, and the time interval is initialized to 2 seconds.

3. A method for implementing a fast switching time of a Web date component according to claim 2, characterized in that: The event processing procedure is: using the change function to switch the year and month, and using the update function to update the currently displayed year and month according to the button type.

4. A method for implementing a fast switching time of a Web date component according to claim 2, characterized in that: The specific steps of the first timer are: switching to the next year and month in the callback function of the first timer is achieved by increasing the value of the current year and month and resetting the value to 1 when it reaches 12, setting the first counter to monitor and record the number of consecutive switching times, increasing the value of the first counter within 6 seconds during the continuous switching time, and stipulating that after the year and month are switched continuously for more than 3 times, the interval time is shortened by 1 / 2 each time, and will no longer be shortened after 0.5 seconds.

5. A method for implementing a fast switching time of a Web date component according to claim 1, characterized in that: In S102, the reference of each perception area is obtained by using the selector method of document.getElementById() through JavaScript, the manual switching mode is switched using the clickHandler() method, the event listener is added using the addEventListener() method, the clickCount() function is used to define variables to track the number of clicks and switches, and a second counter is set to connect the click event listener of the perception area and provide continuous click support, a variable is created to store the reference of the second timer, and the mouse position detection logic is added through the isMouseInArea() function.

6. A method for implementing a fast switching time of a Web date component according to claim 5, characterized in that: The detection logic is: by returning true, the function indicates that the mouse is in the perception area, and returning false, the function indicates that the mouse is not in the perception area. Once the mouse is determined to be in the perception area, the second timer is started for automatic timing and the time interval is reset to 2 seconds, and the automatic switching is re-triggered after 2 seconds.

7. A method for implementing a fast switching time of a Web date component according to claim 1, characterized in that: In S103, the width of each date block in the time panel is fixed to w pixels and the height is fixed to h pixels, and the height of each time panel is fixed to 7 rows and the width is fixed to 7 columns. The heights of areas A and C are set to be consistent with the height of the date body content, and the width of area B is set to be consistent with the width of the date body content.

8. A method for implementing a fast switching time of a Web date component according to claim 7, characterized in that: The specific formula for calculating the height of the two areas A and C is: H A、C =w*7 Among them, H A、C Indicates the height of the two areas A and C, w indicates the fixed width of each date block, and the height of the B area is set to 20 pixels. The specific formula for calculating the width of the B area is: Among them, W B Indicates the width of area B, and w indicates the fixed width of each date block.

9. A method for implementing a fast switching time of a Web date component according to claim 1, characterized in that: In S104, the addEventListener() method is used through JavaScript to add a mouse hover event and listen for a click event, and the date blocks are located by constructing a coordinate system according to the order in which the date blocks are arranged from top to bottom and from left to right.

10. A method for implementing a fast switching time of a Web date component according to claim 9, characterized in that: The specific steps of the position positioning are: if the date block is later on the right and lower side of the time panel, the current date does not meet the requirements and needs to be turned to the back page; if the current position of the mouse is detected to be close to the B and C areas, the mouse is determined to be suspended and clicked; if the date block is later on the left and upper side of the time panel, the current date does not meet the requirements and needs to be turned to the front page; if the current position of the mouse is detected to be close to the A area, the mouse is determined to be suspended and clicked.

Images