使用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脚本
Dec 12 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
Vue组件化开发思考
Feb 02 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
Electron vue的使用教程图文详解
Jul 05 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 过滤危险html代码
2009/06/29 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python爬取微博评论的实例讲解
2021/01/15 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
考试不及格的检讨书
2014/01/22 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
离婚协议书范文2015
2015/01/26 职场文书
检讨书范文500字
2015/01/28 职场文书
离婚案件答辩状
2015/05/22 职场文书
获奖感言怎么写
2015/07/31 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书