zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    BZOJ 3261 最大异或和(可持久化Trie)
    模板 普通平衡树
    HDU4825 Xor Sum(贪心+Trie树)
    二维LIS(CDQ分治)
    IOIOI卡片占卜(Atcoder-IOIOI カード占い)(最短路)
    USACO 2009 Dec cow toll paths 过路费-floyd
    [USACO08JAN]电话线Telephone Lines(分层图)/洛谷P1948
    lightoj 1038 Race to 1 Again 期望
    lightoj 1030 Discovering Gold 期望
    lightoj 1027 A Dangerous Maze 期望
  • 原文地址:https://www.cnblogs.com/benmumu/p/8883586.html
Copyright © 2011-2022 走看看