当前位置: 首页 > 编程笔记 >

javascript实现简单的进度条

徐智渊
2023-03-14
本文向大家介绍javascript实现简单的进度条,包括了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(); 
  } 
}
 类似资料:
  • 本文向大家介绍vue实现简单loading进度条,包括了vue实现简单loading进度条的使用技巧和注意事项,需要的朋友参考一下 刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级。 一、进度条原理 这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条。主要是让进度条的wi

  • 本文向大家介绍php实现简单的上传进度条,包括了php实现简单的上传进度条的使用技巧和注意事项,需要的朋友参考一下 Web上传文件的三种解决方案分享给大家: 这里我要使用的是form法。通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的

  • 本文向大家介绍简单实现python进度条脚本,包括了简单实现python进度条脚本的使用技巧和注意事项,需要的朋友参考一下 最近需要用Python写一个小脚本,用到了一些小知识,赶紧抽空记录一下。不深但是常用。 两个进度条示例,拷贝就能运行: 提供一个自己写的一个简单异步进度条,可以在耗时操作前开启,然后再耗时操作结束后停止。 用法: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多

  • 本文向大家介绍JavaScript实现网页加载进度条代码超简单,包括了JavaScript实现网页加载进度条代码超简单的使用技巧和注意事项,需要的朋友参考一下 网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQu

  • 本文向大家介绍使用Ajax实现简单的带百分比进度条实例,包括了使用Ajax实现简单的带百分比进度条实例的使用技巧和注意事项,需要的朋友参考一下 需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签   这个table标签要隐藏,进度条执行的时候再显示。id为tdOne和tdTwo分别为进度条的蓝色和灰色区域。 2.

  • 本文向大家介绍javascript实现继承的简单实例,包括了javascript实现继承的简单实例的使用技巧和注意事项,需要的朋友参考一下 作为一门面向对象的语言,那么继承自然就是一大特征,下面是一段非常简单代码实例,它演示了实现继承的基本原理,有兴趣的或者恰好要学习此方面的朋友可以参阅一下,希望能够给大家来帮组。 以上所述就是本文的全部内容了,希望大家能够喜欢。