一个简单的进度条演示。

<!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>

感受：

1.在简单的页面里面，在<script>标签里面，可以直接使用id表示某个控件，而不需要使用document.getElementById()。

2.setTimeout()里面的命令可以使用字符串拼接

3.清除setTimeout()

Javascript进度条的更多相关文章

  1. JavaScript 进度条重复加载

    <!DOCTYPE HTML> <html> <head> <meta charset ="utf-8"> <title> ...

  2. javascript进度条实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. JavaScript进度条（datalist/repeater等多个进度条）

    JS代码: function SingleProgressBar() { var iload = document.getElementById("iLoading"); var ...

  4. JavaScript 以及 css3进度条

    JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  7. ASP.NET中二进制流下载文件时进度条的使用

    说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...

  8. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  9. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

随机推荐

  1. ahjesus可供C#使用的ip地理位置查询插件

    http://dev.maxmind.com/geoip/geoip2/downloadable/#MaxMind_APIs 详情请阅读此链接及相关内容

  2. linux系统下nodejs安装过程随记

    首先下载适合的版本.这里我使用的是node v.10.36 先介绍编译安装的详细过程. 下载该版本: wget http://nodejs.org/dist/v0.10.36/node-v0.10.3 ...

  3. Bash中的任务(job)管理

    本来不准备写这篇博客的,因为任务管理(job管理)非常非常常用,以至于觉得根本没有必要去写这样一个东西.但想了下,还是记录一下吧,也许有人会用到呢. 不知你是否碰到过这样的情况,当你兴致勃勃的打开VI ...

  4. 【背景建模】SOBS

    SOBS(self-Organizing through artificial neural networks)是一种基于自组织神经网络的背景差分算法,主要是借鉴神经网络的特性,一个网络输入节点,对应 ...

  5. Python实现装饰模式的一段代码

    # 实现装饰模式的一段代码 import functools def log(func): @functools.wraps(func) def wrapper(*args,**kw): print( ...

  6. oracle RAC的VIP和scan

    我们都知道Oracle RAC中每个节点都有一个虚拟IP,简称VIP,与公网IP在同一个网段. 没有VIP时,Oracle客户端是靠"TCP/IP协议栈超时"来判断服务器故障.而T ...

  7. 手动创建VS单元测试，显示代码覆盖率

    Visual Studio 号称有史以来最强大的IDE,确实如此.创建单元测试也是一键完成:在方法的代码块中右键“Create Unit Test…”,勾选测试项,填项目名,完成.VS就会自动帮你创建 ...

  8. bootstrap深入理解之格子布局

    一.源码文件: _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心m ...

  9. 12款响应式的 jQuery 旋转木马（传送带）插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

  10. 【JavaScript】内置对象Math

    Math是具有用于数学常数和函数的属性和方法一内置对象.不是函数对象. 描述编辑 不像其他的全局对象,Math不是一个构造函数.所有属性和方法Math都是静态的.你指的是常数pi为Math.PI你调用 ...