javascript实现简单的进度条
时间:2016-01-22
不论用什么语言开发,进度条在文件上传下载中经常使用到,本文给大家分享2个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();
}
}
- 零基础学编程039:生成群文章目录(2)
- Android中的AutoCompleteTextView的使用
- 深度学习以及卷积基础
- Android 控件:使用下拉列表框--Spinner
- 层层升入:SQL极限调优之一次更新操作的N种优化可能
- 零基础学编程037:小数据分析
- 【干货】圣诞老人是否真实存在?训练Tensorflow的对象检测API能够告诉你答案
- 排序含有数字的字符串:一个巧妙地方法
- wpf 控件大小随窗体大小改变而改变
- 零基础学编程036:快速编写一个GUI程序
- WPF TreeView 选择事件执行两次,获取TreeView的父节点的解决方法
- 零基础学编程041:欧拉公式的几何意义
- 零基础学编程040:在Windows上安装Python库的正确姿势
- c++/c 获取cpp文件行号跟文件名
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android实现简单手电筒功能
- k8s安装自动证书签发cert-manager letsencrypt
- Android仿Keep运动休息倒计时圆形控件
- android通过led实现手电筒功能
- Android 7.0 手电筒控制实现
- 【STM32H7】第13章 RL-TCPnet V7.X之创建多个TCP客户端
- Android倒计时的开始与停止 剩余时分秒的展示
- 由LFI引起的Zimbra邮件管理系统0day
- Android手电筒兼容各个手机与版本
- 【STM32F429】第13章 RL-TCPnet V7.X之创建多个TCP客户端
- RecyclerView仿应用列表实现网格布局
- Android实现带进度条的WebView
- Android实现记住密码功能
- 【- Flutter Web篇 -】 FlutterUnit web版闪亮登场
- Android简单实现弹幕效果