使用Ajax实现进度条的绘制


Posted in Javascript onApril 07, 2022

使用:Easy Mock创建api接口

使用Ajax实现进度条的绘制

注意:若弹出该invalid or unexpected token错误提示信息,说明编写的数据格式有问题,修改为正确格式即可创建成。随后可以在postman中进行验证:

使用Ajax实现进度条的绘制

ajax通过GET方法获取数据:

使用Ajax实现进度条的绘制

根据获取出来得阶段数据来更改相对应得进度:

使用Ajax实现进度条的绘制

<!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 class="box">
        <div class="pr1">
            <span class="circle">1</span>
            <span class="line"></span>
            <span class="cont1">科研人员申报</span>
        </div>
        <div class="pr1">
            <span class="circle">2</span>
            <span class="line"></span>
            <span class="cont2">院系申报</span>
        </div>
        <div class="pr1">
            <span class="circle">3</span>
            <span class="line"></span>
            <span class="cont2">专家评审</span>
        </div>
        <div class="pr1_last">
            <span class="circle">4</span>
            <span class="cont2">校级审核</span>
        </div>
    </div>
 
</body>
 
</html>
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
}

到此这篇关于使用Ajax实现进度条的绘制的文章就介绍到这了,更多相关Ajax进度条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
微信小程序实现签到功能
Oct 31 Javascript
Vue.Draggable实现交换位置
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
vue cli4中mockjs在dev环境和build环境的配置详情
简单聊聊TypeScript只读修饰符
Apr 06 #Javascript
关于JS中的作用域中的问题思考分享
JavaScript中的LHS和RHS分析详情
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
You might like
php 获取select下拉列表框的值
2010/05/08 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP生成树的方法
2015/07/28 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python妙用之编码的转换详解
2017/04/21 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python3将变量输入的简单实例
2020/08/19 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
error和exception有什么区别
2012/10/02 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
青年教师个人总结
2015/02/11 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA