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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
You might like
PHP的一个基础知识 表单提交
2011/07/04 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
loading动画特效小结
2017/01/22 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python 写入csv乱码问题解决方法
2016/10/23 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python中必要的名词解释
2019/11/20 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
巾帼建功标兵事迹材料
2014/05/11 职场文书
社会实践活动总结范文
2014/07/03 职场文书
群众路线表态发言材料
2014/10/17 职场文书
父亲节寄语大全
2015/02/27 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
MySQL 字符集 character
2022/05/04 MySQL
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python