zoukankan      html  css  js  c++  java
  • 进度条的javascript实现方式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    #out{
    80%;
    height:20px;
    background-color:#FFFFFF;
    border-bottom-style:solid;
    border-top-style:solid;
    border-left-style:solid;
    border-right-style:solid;

    margin:0 auto;

    }
    #inner{
    height:20px;
    0%;
    background-color:#00CC00;
    text-align:right;




    }
    #showProgress{
    text-align:center;

    }
    #showProgress input{
    border:hidden;
    background-color:#999999;
    text-align:center;


    }
    #all{
    text-align:center;
    margin:50px auto;
    }

    </style>
    </head>

    <body>
    <div id="all">
    <div id="out">
    <div id="inner"></div>
    </div>
    <div id="showProgress"><input type="text" id="showPro" align="center" /></div>
    <input type="button" onclick="javascript:myRefress();" value="onload"/>
    <input type="button" onclick="javascript:complementBar();" value="reset"/>
    <input type="button" onclick="javascript:showBar();" value="showBar"/>
    </div>
    <script type="text/javascript">
    var i=0;
    var fun;
    function setProgressBar(pro){
    document.getElementById("inner").style.width=pro+"%";
    }
    function complementBar(){
    document.getElementById("inner").style.display="none";


    }
    function myRefress(){
    setProgressBar(i);
    document.getElementById("showPro").value=i+"%";
    i++;
    if(i<100){
    fun=setTimeout("myRefress()",100);
    }else{
    complementBar();
    i=0;
    }
    }
    function showBar(){
    document.getElementById("inner").style.display="block";
    }
    function showPro(){


    }

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

  • 相关阅读:
    基于Kubernates微服务案例
    领导人怎样带领好团队
    前端性能核对表Checklist-2018
    国际巨头互联网公司一些运营与管理思路
    IT研发工程师职业规划
    高性能风控数据平台设计
    基础设施DevOps演进之路
    2017-2018年Scrum状态调查报告
    大型互联网系统的监控流水线
    小程序【情书与歌】一小时过审经验小谈
  • 原文地址:https://www.cnblogs.com/moonfans/p/2985655.html
Copyright © 2011-2022 走看看