一个简单的进度条演示。

<!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. myeclipse打红叉

    因为还没有告诉myeclipse去验证它.解决方法,选中js文件,右键Myeclipse--ManaValidation--ExcludeResource--(选中全部或者那个js)--OK

  2. Lucene.net站内搜索—2、Lucene.Net简介和分词

    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...

  3. 一个ORM的实现（附源代码）

    1 前言 经过一段时间的编写,终于有出来一个稳定的版本,期间考虑了多种解决方案也偷偷学了下园子里面大神们的作品. 已经有很多的ORM框架,为什么要自己实现一个?我的原因是在遇到特殊需求时,可以在ORM ...

  4. python之socket开发

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...

  5. ABAP 加密解密程序

    用于对字符串的加密和解密: DATA: o_encryptor TYPE REF TO cl_hard_wired_encryptor, o_cx_encrypt_error TYPE REF TO ...

  6. ZeroMq安装包的生成【ubuntu10】

    生成方法添加源sudo add-apt-repository ppa:chris-lea/zeromqsudo add-apt-repository ppa:chris-lea/libpgmsudo ...

  7. Excel里生成GUID

    Private Declare Function CoCreateGuid Lib "ole32" (id As Any) As Long    Private Function ...

  8. node.js Tools for Visual Studio 介绍

    node.js Tools for Visual Studio简称NTVS 项目 安装包地址:https://nodejstools.codeplex.com 目前支持2012和2013

  9. Android 创建自己的Camera App

    在sdk中找到/sdk/docs/guide/topics/media/camera.html#custom-camera,里面有详细的api参考 在清单文件中添加相应的权限: <uses-pe ...

  10. java你可能不知道的事(2)--堆和栈

    在java语言的学习和使用当中你可能已经了解或者知道堆和栈,但是你可能没有完全的理解它们.今天我们就一起来学习堆.栈的特点以及它们的区别.认识了这个之后,你可能对java有更深的理解. Java堆内存 ...