使用Ajax實現(xiàn)進(jìn)度條的繪制

第使用Ajax實現(xiàn)進(jìn)度條的繪制使用：EasyMock創(chuàng)建api接口

注意：若彈出該invalidorunexpectedtoken錯誤提示信息，說明編寫的數(shù)據(jù)格式有問題，修改為正確格式即可創(chuàng)建成。隨后可以在postman中進(jìn)行驗證：

ajax通過GET方法獲取數(shù)據(jù)：

根據(jù)獲取出來得階段數(shù)據(jù)來更改相對應(yīng)得進(jìn)度：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

linkrel="stylesheet"href="2.css"rel="externalnofollow"

scriptsrc="2.js"/script

scriptsrc="jquery.min.js"/script

/head

body

div

div

span1/span

span/span

span科研人員申報/span

/div

div

span2/span

span/span

span院系申報/span

/div

div

span3/span

span/span

span專家評審/span

/div

div

span4/span

span校級審核/span

/div

/div

/body

/html

window.onload=function(){

$(function(){

varb

//使用ajax獲取api中得數(shù)據(jù)，看是那個階段

$.ajax({

type:'GET',

url:'/mock/624d8ce9f56fd246b02bfcaf/process/getinfo',

success:function(res){

console.log(res.data[0].BatchState);

b=res.data[0].BatchState;

//利用b數(shù)據(jù)去改變狀態(tài)//1未開始，2申報中，3院系審核中，4專家審核中，5校級審核中，6已結(jié)束

if(b==1){

$('.cont1').css('color','skyblue')

$('.circle').eq(0).css('background-color','skyblue')

if(b==2){

$('.line').eq(0).css('border-color','green')

$('.line').eq(0).css('border-style','solid')

$('.circle').eq(0).html('√')

$('.circle').eq(0).css('background-color','green')

$('.cont1').css('color','green')

$('.circle').eq(1).css('background-color','skyblue')

$('.cont2').eq(0).css('color','skyblue')

if(b==3){

$('.circle').eq(0).html('√')

$('.circle').eq(0).css('background-color','green')

$('.circle').eq(1).html('√')

$('.cont2').eq(0).css('color','green')

$('.circle').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')

$('.circle').eq(2).css('background-color','skyblue')

$('.cont2').eq(1).css('color','skyblue')

if(b==4){

$('.circle').eq(0).html('√')

$('.circle').eq(0).css('background-color','green')

$('.circle').eq(1).html('√')

$('.cont2').eq(0).css('color','green')

$('.cont2').eq(1).css('color','green')

$('.circle').eq(1).css('background-color','green')

$('.circle').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')

$('.circle').eq(3).css('background-color','skyblue')

$('.cont2').eq(2).css('color','skyblue')

}

*{

margin:0px;

padding:0px;

.box{

width:305px;

height:40px;

margin:20pxauto;

line-height:40px;

.circle{

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:grey1px;

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