網站首頁 編程語言 正文
使用:Easy Mock創建api接口
注意:若彈出該invalid or unexpected token錯誤提示信息,說明編寫的數據格式有問題,修改為正確格式即可創建成。隨后可以在postman中進行驗證:
ajax通過GET方法獲取數據:
根據獲取出來得階段數據來更改相對應得進度:
Document 1 科研人員申報2 院系申報3 專家評審4 校級審核
window.onload = function() { $(function() { var b //使用ajax獲取api中得數據,看是那個階段 $.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數據去改變狀態//1未開始,2申報中,3院系審核中,4專家審核中,5校級審核中,6已結束 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 }
原文鏈接:https://blog.csdn.net/qq_45387575/article/details/123994350
相關推薦
- 2022-10-04 正則表達式中關于對原生字符串的簡單理解_正則表達式
- 2022-06-18 C語言簡明講解單引號與雙引號的使用_C 語言
- 2023-01-23 使用Docker部署Dashdot服務器儀表盤的步驟_docker
- 2023-01-12 C語言技巧提升之回調函數的掌握_C 語言
- 2022-08-13 SpringSecurity+JWT實現認證及授權詳細步驟
- 2023-03-11 go-micro微服務JWT跨域認證問題_Golang
- 2022-07-01 Python判斷Nan值的五種方式小結_python
- 2022-08-01 Android開發之Flutter與webview通信橋梁實現_Android
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支