js implements dynamic process progress display bar

This time I will bring you js to implement a dynamic process progress display bar. What are theprecautionsfor realizing a dynamic process progress display bar with js. The following is a practical case, let's take a look.

1. Design ideas

Divided into the following steps (for reference only)

【Vertical line】

This is made using the ul list tag, which ensures that it can be added at any time and arranged vertically

【Small circle】

The html tag does not seem to provide a small circle tag. Here, p is added with a radian angle to complete it. If a square p is added with a radian angle equal to the length (or width) of p, a small circle can be realized. The tape is even simpler, just add text directly to p

【Word】

The text is required to follow the small circle, and maintain the same horizontal height as the small circle. Here, position: absolute; set top to complete the layout of the same horizontal height

【dynamic effect】

Needless to say, the dynamic effects of the front-end must be completed by Javascript. Here we mainly need to set two events, namely,

Mouse move eventonmouseover=”on_mous_move(‘info_name_1’)”

Mouse out eventonmouseout=”on_mous_out(‘info_name_1’)”

The main logic is to add ❤ and two spaces before and after the text, and delete the added content

【Notice】

For js, a space is actually 6 characters ";", so you need to pay attention when cutting

. . . . That’s all, here is the source code of the implementation

-------------------------------------------------- ----------------------------------

2. Implement source code

The source code is as follows, for reference only:

     
    
 
 
 
 
 
1
 
 打开冰箱 
 
2
 
 把大象放进去 
 
3
 
 关上冰箱 
 
  

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Angularjs implements image preview upload

vue uses axios and encapsulation

The above is the detailed content of js implements dynamic process progress display bar. For more information, please follow other related articles on the PHP Chinese website!