javascript - 如何使用jQuery获取gmail类型的进度条

标签 javascript jquery html

目前我正在刷新 html 页面以获取进度。刷新 html 页面的同时，进度条也会刷新。不用刷新html页面，我们可以有一个gmail类型的进度条吗？

谁能帮帮我...

我的index.html:

<html>
<head>

<style>
    #progressbar {
        width: 400px;
        height: 22px;
        border: 1px solid #111;
        background-color: #292929;
    }
    #progressbar div {
        height: 100%;
        color: #fff;
        text-align: right;
        line-height: 22px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: #0099ff;

    }
</style>
</head>

<body>

<script type="text/javaScript">
var myVar;

function startTimer() {
    myVar = setTimeout(function(){ window.location.reload(true); }, 10000);
}
startTimer();
function myStopFunction() {
    clearTimeout(myVar);
}
</script>
<script src="http://localhost:8085/javascripts/socket.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap-progressbar.js"></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8085/stylesheets/bootstrap.css" />
<!--<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">-->


    <div id="progressbar"><div></div></div>


<script type="text/javascript">
var socket = io('http://localhost:8085/socket_issue');
  socket.on('connect', function(){ console.log('connected to socket'); });
  socket.on('error', function(e){ console.log('error' + e); });
  socket.on('message', function(data){
   console.log(data);

       function progress(percent, $element) {
        if(percent==100)//Donwload complete
           myStopFunction();
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
    }
    progress(JSON.parse(data).percent, $('#progressbar'));


  });
  socket.on('disconnect', function(){});
</script>
</body>
</html>

我编辑的index.html:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Example of Smooth Progress Bar Loading Effect With jQuery</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://localhost:8085/stylesheets/progressbar.css" />

</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/loading/Smooth-Progress-Bar-Loading-Effect-With-jQuery.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h2 style="margin-top:150px;">Example of Smooth Progress Bar Loading Effect With jQuery</h2>
<section class="container">
<div class="progress"> <span class="blue" style="width:0%;"><span>0%</span></span> </div>
</section>
<script src="http://localhost:8085/javascripts/socket.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type='text/javascript'>

var socket = io('http://localhost:8085/socket_issue');
  socket.on('connect', function(){ console.log('connected to socket'); });
  socket.on('error', function(e){ console.log('error' + e); });
  socket.on('message', function(data){
   console.log(data);

var percent = JSON.parse(data).percent;
percent += "%";
console.log(percent);

      function loading(percent){
        $('.progress span').animate({width:percent},1000,function(){
            $(this).children().html(percent);
            if(percent=='100%'){
                $(this).children().html('Loading Complete, Redirect to Home Page...&nbsp;&nbsp;&nbsp;&nbsp;');
                setTimeout(function(){
                    $('.container').fadeOut();
                    location.href="http://www.jqueryscript.net";
                },1000);
            }
        })
    }
  socket.on('disconnect', function(){});

});

  </script> 
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<script type="text/javascript">loading('5%');</script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
<script type="text/javascript">loading('20%');</script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script> 
<script type="text/javascript">loading('40%');</script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script> 
<script type="text/javascript">loading('70%');</script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> 
<script type="text/javascript">loading('100%');</script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>

最佳答案

看看这个。

http://jsfiddle.net/hgd5anb6/

HTML:

<div class="msg">Loading of googlemail@gmail.com...</div>
<div class="loader_box">
    <div class="loader"></div>
</div>

CSS:

body {
    font-family: 'Helvetica', 'Helvetica Neue', sans-serif;
    background: #F5F5F5;
    font-size: 16px;
}
.msg {
    margin-top: 50px;
    text-align: center;
    font-weight: bold;
    margin-bottom:2px;
}
.loader_box {
    text-align: center;
    width: 320px;
    border: 1px solid #999;
    padding: 1px;
    height: 8px;
    margin-right: auto;
    margin-left: auto;
}
.loader {
    width: 0;
    height: 100%;
    background-color: #6188F5;
    background-repeat: repeat-x;
    background-position: 0 0;
    /*background-size*/
    -webkit-background-size: 16px 8px;
    -moz-background-size: 16px 8px;
    -o-background-size: 16px 8px;
    background-size: 16px 8px;
    background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
    background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
    background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
    background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
    /*animation*/
    -webkit-animation: load 5s linear 0 infinite;
    -moz-animation: load 5s linear 0 infinite;
    -ms-animation: load 5s linear 0 infinite;
    -o-animation: load 5s linear 0 infinite;
    animation: load 5s linear 0 infinite;
}
/* Then animate the stuff */
@-webkit-keyframes load { 
    0% { width: 0% ;
        background-position:0 0;}
    100% { width: 100%;
            background-position:-40px 0;
            }
}
@-ms-keyframes load { 
   0% { width: 0% ;
        background-position:0 0;}
    100% { width: 100%;
            background-position:-40px 0;
            }
}
@-o-keyframes load { 
    0% { width: 0% ;
        background-position:0 0;}
    100% { width: 100%;
            background-position:-40px 0;
            }
}
@keyframes load { 
  0% { width: 0% ;
        background-position:0 0;}
    100% { width: 100%;
            background-position:-40px 0;
            }
}

关于javascript - 如何使用jQuery获取gmail类型的进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33801169/

上一篇：javascript - Chrome 浏览器无法浏览文件

下一篇：javascript - 在我的 HTML 中使用来自 "prompt"窗口的用户输入

相关文章：

javascript - 如何在Javascript中计算多个动态输入字段的总和？

javascript - jQuery:如何从一个 td 导航到表中的另一个特定 td

javascript - 如何以完美的网格样式将不同大小的 DIV float 到左侧？

javascript - 移动设备上的下拉菜单不起作用

javascript - 如何使 getElementsbyName 适用于 IE(和 FF)？

javascript - 循环并在 html 前面添加 javascript

php - 将 HTML 代码转换为 XLS/XLSX

javascript - 如何为多个模板拥有一个 Controller 的多个实例

javascript - 滚动功能在每个滚动条上重播动画

javascript - 如何一一自动隐藏多个警报。先进先出？

©2024 IT工具网  联系我们