• easyui制作进度条案例demo


    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title>fe</title>
    <link rel="stylesheet" type="text/css" href="easyui/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/jinduDemo.css">
    <link rel="stylesheet" type="text/css" href="easyui/lodingstyle.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <div class="progressBIgDiv"style="z-index:9999;background: -webkit-gradient(linear, left top, left bottom, from(#28519c00), to(#1b2969));">
    <div id="caseViolette">
    <div id="cercle">
    <div id="cercleCache"></div>
    </div>
    <div id="load">
    <p>loading</p>
    </div>
    <div id="point"></div>
    </div>
    <div id="p" class="easyui-progressbar" style="position: absolute;top: 152px; 498px;height: 18px;margin: 0px;"></div>
    <div style="position: absolute;margin:20px 0;top: 152px;">
    <a href="#" class="easyui-linkbutton" onclick="start()">测试</a>
    </div>
    </div>
    <script>
    function start() {
    var value = $('#p').progressbar('getValue');
    if (value < 100) {
    value += Math.floor(Math.random() * 10);
    $('#p').progressbar('setValue', value);
    setTimeout(arguments.callee, 200);
    }
    };
    </script>

    <!--<script type='text/javascript'>
    var timerId;
    $(function(){
    //每隔0.5秒自动调用方法,实现进度条的实时更新
    timerId=window.setInterval(getForm,500);
    });
    function getForm(){
    //使用JQuery从后台获取JSON格式的数据
    $.ajax({
    type:"post",//请求方式
    url:"getProgressValueByJson",//发送请求地址
    timeout:30000,//超时时间:30秒
    dataType:"json",//设置返回数据的格式
    //请求成功后的回调函数 data为json格式
    success:function(data){
    if(data.progressValue>=100){
    window.clearInterval(timerId);
    }
    $('#p').progressbar('setValue',data.progressValue);
    },
    //请求出错的处理
    error:function(){
    window.clearInterval(timerId);
    alert("请求出错");
    }
    });
    }
    </script>-->

    </body>

    </html>
  • 相关阅读:
    直方图
    Netty学习摘记 —— 初步认识Netty核心组件
    打败算法 —— 圆圈中最后剩下的数字
    打败算法 —— 单词的压缩编码
    大数据生态圈 —— 关于实时流处理的单节点伪分布式环境搭建
    打败算法 —— 按摩师
    打败算法 —— 最长公共子序列
    Spark学习摘记 —— Pair RDD行动操作API归纳
    Spark学习摘记 —— Pair RDD转化操作API归纳
    Spark学习摘记 —— RDD行动操作API归纳
  • 原文地址:https://www.cnblogs.com/benmumu/p/8883586.html
Copyright © 2020-2023  润新知