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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
window.open()实现post传递参数
Mar 12 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
webpack4简单入门实例
Sep 06 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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
神族 PROTOSS 概述
2020/03/14 星际争霸
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
经验几则 推荐
2006/09/05 Javascript
非常不错的一个javascript 类
2006/11/07 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
详解Python爬虫的基本写法
2016/01/08 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python Flask-web表单使用详解
2017/11/18 Python
使用Python设计一个代码统计工具
2018/04/04 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
员工培训心得体会
2013/12/30 职场文书
上课玩手机检讨书
2014/02/08 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
解除劳动合同协议书
2014/09/17 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
水电工程师岗位职责
2015/02/13 职场文书
电影红河谷观后感
2015/06/11 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS