How to use Ajax to realize the drawing of progress bar

This article focuses on "how to use Ajax to achieve the drawing of the progress bar", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use Ajax to draw the progress bar.

Create an api interface using: Easy Mock

Note: if the invalid or unexpected token error message pops up, it means that there is something wrong with the written data format, and you can create it by changing it to the correct format. You can then verify it in postman:

Ajax obtains the data through the GET method:

Change the corresponding progress according to the obtained phase data:

Document 1 application of scientific research personnel, application of 2 departments, application of 3 experts review 4 School-level audit _ window.onload = function () {$(function () {var b / / use ajax to obtain the data in api Look at that stage $.ajax ({type: 'GET', url:' https://mock.mengxuegu.com/mock/624d8ce9f56fd246b02bfcaf/process/getinfo', success: function (res) {console.log (res.data [0] .BatchState)) B = res.data [0] .BatchState / / use b data to change status / / 1 has not started, 2 declaration, 3 department audit, 4 expert audit, 5 school level audit 6 ended if (b = = 1) {$('.cont1') .css ('color',' skyblue') $('.contacts') .eq (0) .css ('background-color' 'skyblue')} if (b = = 2) {$(' .line') .eq (0). Css ('border-color',' green') $('.line') .eq (0) .css ('border-style'') 'solid') $(' .girls'). Eq (0). Html ('√') $('. Background-color','). Eq (0). Css ('background-color',' green') $('.cont1'). Css ('color',' green') $('.contacts'). Eq (1). Css ('background-color'') 'skyblue') $(' .cont2'). Eq (0). Css ('color',' skyblue')} if (b = 3) {$('.cont2'). Eq (0). Html ('√') $('.cont2'). Eq (0). Css ('background-color' 'green') $(' .cont2'). Eq (1). Html ('√') $('.cont2'). Eq (0). Css ('color',' green') $('.cont2'). Eq (1). Css ('background-color',' green') $('.cont1') .css ('color'') 'green') $(' .line'). Eq (0). Css ('border-color',' green') $('.line'). Eq (1). Css ('border-color',' green') $('.line'). Eq (0). Css ('border-style' 'solid') $(' .line'). Eq (1). Css ('border-style',' solid') $('. Eq'). Eq (2). Css ('background-color',' skyblue') $('.cont2'). Eq (1). Css ('color' 'skyblue')} if (b = = 4) {$(' .girls'). Eq (0). Html ('√') $('.girls'). Eq (0). Css ('background-color' 'green') $(' .cont2'). Eq (1). Html ('√') $('.cont2'). Eq (0). Css ('color',' green') $('.cont2'). Eq (1). Css ('color'') 'green') $(' .cont1'). Eq (1). Css ('background-color',' green') $('. Green''). Eq (2). Css ('background-color',' green') $('.cont1'). Css ('color' 'green') $(' .line'). Eq (0). Css ('border-color',' green') $('.line'). Eq (1). Css ('border-color',' green') $('.line'). Eq (2). Css ('border-color' 'green') $(' .line'). Eq (0). Css ('border-style',' solid') $('.line'). Eq (1). Css ('border-style',' solid') $('.line'). Eq (2). Css ('border-style' 'solid') $('. Skyblue''). Eq (3). Css ('background-color',' skyblue') $('.cont2'). Eq (2). Css ('color',' skyblue')})}} * {margin: 0px Padding: 0px;} .box {width: 305px; height: 40px; margin: 20px auto; line-height: 40px;} .display {position: absolute; top: 10px; left: 0px; display: inline-block; width: 20px; height: 20px; border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%; background-color: grey; line-height: 20px Text-align: center; color: white} .line {position: absolute; top: 20px; left: 19px; display: inline-block; width: 70px; height: 0px; border-top: grey 1px; margin: 0px; border-top-style: dotted} .pr1 {float: left; width: 90px; height: 40px; position: relative; text-align: center;} .pr1 _ last {float: left Width: 35px; height: 40px; position: relative; text-align: center;} .cont1 {position: absolute; top: 18px; left:-20px; font-size: 10px; color: grey} .cont2 {position: absolute; top: 18px; left:-10px; font-size: 10px Color: grey} so far, I believe you have a deeper understanding of "how to use Ajax to achieve the drawing of the progress bar". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!