文章詳情頁

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

瀏覽：93日期：2022-06-12 09:46:26

使用：Easy Mock創(chuàng)建api接口

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

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

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

<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="2.css" rel="external nofollow" >    <script src="2.js"></script>    <script src="jquery.min.js"></script></head> <body>    <div><div>    <span>1</span>    <span></span>    <span>科研人員申報</span></div><div>    <span>2</span>    <span></span>    <span>院系申報</span></div><div>    <span>3</span>    <span></span>    <span>專家評審</span></div><div>    <span>4</span>    <span>校級審核</span></div>    </div> </body> </html>

window.onload = function() {    $(function() {var b    //使用ajax獲取api中得數(shù)據(jù)，看是那個階段$.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;//利用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: 20px auto;    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: 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}

到此這篇關(guān)于使用Ajax實現(xiàn)進度條的繪制的文章就介紹到這了,更多相關(guān)Ajax進度條內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！

Ajax

上一條：AJAX原理以及axios、fetch區(qū)別實例詳解下一條：實現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟

相關(guān)文章：

1. Django與AJAX實現(xiàn)網(wǎng)頁動態(tài)數(shù)據(jù)顯示的示例代碼2. Ajax實現(xiàn)表格中信息不刷新頁面進行更新數(shù)據(jù)3. Ajax提交post請求案例分析4. 一篇文章弄清楚Ajax請求的五個步驟5. Python的Tqdm模塊實現(xiàn)進度條配置6. layui的checbox在Ajax局部刷新下的設(shè)置方法7. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)8. 原生Ajax之全面了解xhr的概念與使用9. laravel ajax curd 搜索登錄判斷功能的實現(xiàn)10. ajax使用formdata上傳文件流

排行榜

					
					如何用python插入獨創(chuàng)性聲明
python 批量下載bilibili視頻的gui程序
python鏈表類中獲取元素實例方法
詳解Vue中Axios封裝API接口的思路及方法
python中if嵌套命令實例講解
使用ProcessBuilder調(diào)用外部命令，并返回大量結(jié)果
Spring Boot事務(wù)配置操作
ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))
使用css實現(xiàn)全兼容tooltip提示框
Python實現(xiàn)查找數(shù)據(jù)庫最接近的數(shù)據(jù)
python b站視頻下載的五種版本
				