javascript实现简单的进度条

前端技术 2023/09/07 JavaScript

示例一：

<!doctype html>
<html>
<head>
<meta charset=\"utf8\">
<title>Process Bar</title>
<script>
var t;

function s(c)
{
  if(c<=100)
  {
    val.style.width=c+\"%\";
    percent.innerHTML=c+\"%\";
    btn.disabled=true;
    btnp.disabled=false;
    c=c+10;
    t=setTimeout(\"s(\"+c+\")\",500);
  }
  else
  {
    clearTimeout(t);
    btnc.disabled=false;
    btnp.disabled=true;
    return;
  }
}

function c()
{
  clearTimeout(t);
  val.style.width=\"0px\";
  percent.innerHTML=\"0%\";
  btn.disabled=false;
  btnc.disabled=true;
  btnp.disabled=true;
  btnp.value=\'Pause\';
}

function p()
{
  var temp;
  if(\'Pause\' == btnp.value)
  {
    clearTimeout(t);
    btnp.value=\'Go on\';
    btnc.disabled=false;
  }
  else
  {
    temp=val.style.width;
    btnp.value=\'Pause\';
    var k=parseInt(delEnd(temp));
    s(k);
    btnc.disabled=true;
  }  
}

function delEnd(str)
{
  var temp=\"\";
  for(var i=0; i < str.length-1; i++)

  {
    temp=temp+str[i];
  }

  return temp;

}
</script>
</head>

<body>
<div id=\"bar\" style=\"width:300px; height:30px; border:solid 1px; float:left;\">
 <div id=\"val\" style=\"height:100%; background-color:#03F; width:0px;\"></div>
</div>
<div id=\"percent\" style=\"float:left; line-height:30px;\">0%</div>
<div style=\"clear:both\"></div>
<br />
<input id=\"btn\" type=\"button\" value=\"Start\" onClick=\"s(0)\" />
<br />
<input id=\"btnc\" type=\"button\" value=\"Clear\" onClick=\"c()\" disabled />
<br />
<input id=\"btnp\" type=\"button\" value=\"Pause\" onClick=\"p()\" disabled />
</body>
</html>

再来分享一个结合.net的

建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：

<!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\" id=\"mainWindow\">
<head>
  <title>无标题页</title>
  <script language=\"javascript\">
    function SetPorgressBar(pos)
    {
      //设置进度条居中
      var screenHeight = window[\"mainWindow\"].offsetHeight;
      var screenWidth = window[\"mainWindow\"].offsetWidth;
      ProgressBarSide.style.width = Math.round(screenWidth / 2);
      ProgressBarSide.style.left = Math.round(screenWidth / 4);
      ProgressBarSide.style.top = Math.round(screenHeight / 2);
      ProgressBarSide.style.height = \"21px\";
      ProgressBarSide.style.display = \"\";
       
      //设置进度条百分比            
      ProgressBar.style.width = pos + \"%\";
      ProgressText.innerHTML = pos + \"%\";
    }

    //完成后隐藏进度条
    function SetCompleted()
    {    
      ProgressBarSide.style.display = \"none\";
    }
   </script> 
</head>
  <body>
  <div id=\"ProgressBarSide\" style=\"position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none\">
    <div id=\"ProgressBar\" style=\"position:absolute;height:21px;width:0%;background-color:#3366FF\"></div>
    <div id=\"ProgressText\" style=\"position:absolute;height:21px;width:100%;text-align:center\"></div>
  </div>
  </body>
</html>

后台代码，Default.aspx.cs：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;
using System.IO;

public partial class _Default : System.Web.UI.Page 
{
  private void beginProgress()
  {
    //根据ProgressBar.htm显示进度条界面
    string templateFileName = Path.Combine(Server.MapPath(\".\"), \"ProgressBar.htm\");
    StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding(\"GB2312\"));
    string html = reader.ReadToEnd();
    reader.Close();
    Response.Write(html);
    Response.Flush();
  }

  private void setProgress(int percent)
  {
    string jsBlock = \"<script>SetPorgressBar(\'\" + percent.ToString() + \"\'); </script>\";
    Response.Write(jsBlock);
    Response.Flush();
  }

  private void finishProgress()
  {
    string jsBlock = \"<script>SetCompleted();</script>\";
    Response.Write(jsBlock);
    Response.Flush();
  }

  private void Page_Load(object sender, System.EventArgs e) 
  {
    beginProgress();

    for (int i = 1; i <= 100; i++)
    {
      setProgress(i);

      //此处用线程休眠代替实际的操作，如加载数据等
      System.Threading.Thread.Sleep(50);
    }

    finishProgress(); 
  } 
}

本文地址：https://www.stayed.cn/item/19951

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案