使用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 相关文章推荐
jquery随机展示头像代码
Dec 21 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
JavaScript数组操作详解
Feb 04 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
vue-router路由模式详解(小结)
Aug 26 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
建立动态的WML站点(二)
2006/10/09 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript计时器详解
2015/02/28 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
nodejs动态创建二维码的方法
2017/08/12 NodeJs
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python温度转换华氏温度实现代码
2020/12/06 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
西部世纪.net笔试题面试题
2014/04/03 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
争做文明公民倡议书
2014/08/29 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2019银行竞聘书
2019/06/21 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL