使用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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
JavaScript类的继承多种实现方法
May 30 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
SMARTY学习手记
2007/01/04 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python实现归并排序算法
2018/11/22 Python
python调用c++传递数组的实例
2019/02/13 Python
详解Python 解压缩文件
2019/04/09 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
金融管理专业求职信
2014/07/10 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
初中运动会前导词
2015/07/20 职场文书
新学期家长寄语2016
2015/12/03 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android