socialforge/app/views/projects/yun_dep.html.erb

<div class="project_r_h">
  <h2 class="project_h22"><%= l(:label_project_dts_yun) %></h2>
</div>

<!--JS进度条-->
<style type="text/css">
    #out{}
    #in{width:10px; height:20px;background:#15BCCF;color:white;text-align:center;}
    #font_color{background:yellow;text-align:center;color:white;}
</style>
<div style="padding-left: 200px;">
  <div id='out'>
    <p style="padding-left: 120px;padding-bottom: 10px;font-size: 14px;">云化部署中...</p>
    <div style="width:300px;height:20px;background:#EEE;">
      <div id="in" style="width:1%">0%</div>
      <div>
        <script type="text/javascript">
            i=0;
            $(function(){
                ba=setInterval("begin()",30);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数
            });
            function begin()
            {
                i+=1;
                if(i<=100)
                {
                    document.getElementById("in").style.width=i+"%";
                    document.getElementById("in").innerHTML=i+"%";}
                else
                {
                    clearInterval(ba);
                    $("#show_content_div").show();
                    $("#out").hide();
//                document.getElementById("out").style.display="none";
//                document.write("<span style='background:yellow;text-align:center;color:white;'>Successs!</span>");
                }
            }
        </script>
      </div>
    </div>
  </div>
</div>

<div id="show_content_div" style="display: none;padding-top: 0px; ">
  <p class="pl10 f14 "><span style="color: #7f7f7f;font-size: 14px; ">点击进入：</span>
    <span><a href="http://rubyblog.forge.trustie.net/myblog" target="_Blank" style="color: #15BCCF;font-size: 14px;">云化部署平台</a></span></p>
</div>