首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现简单的进度条

Posted in Javascript onJuly 02, 2015

示例一：

<!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(); 
  } 
}

javascript实现简单的进度条

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 #Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 #Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 #Javascript
JS验证IP，子网掩码，网关和MAC的方法
Jul 02 #Javascript
JavaScript实现动态添加，删除行的方法实例详解
Jul 02 #Javascript
javascript获取select值的方法分析
Jul 02 #Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 #Javascript
德劲1102(1) A254(1) 上海永华(1) 德劲1107(1) GF515(1) 乐信(1) SHARP(1) 安健(1) RP2100(1) SRF-M100(1)
You might like
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
js在HTML的三种引用方式详解
2020/08/29 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python反转序列的方法实例分析
2018/03/21 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python实现多线程端口扫描
2019/08/31 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
中英双版中文教师求职信
2013/10/27 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
初三毕业评语
2014/12/26 职场文书
创业者如何撰写出一份打动投资人的商业计划书？
2019/07/02 职场文书