一个简单的进度条演示。

<!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. 用SQL语句添加删除修改字段_常用SQL

    1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNc ...

  2. MP4和HR-HDTV压制教程

    写在前 几年前还没工作的时候,长期混迹于百度“恐怖片吧”和“电锯惊魂吧”.因喜欢看电影,也自学了RMVB内嵌字幕的压制. 偶然机会加入@谢耳朵字幕组,因RMVB过于陈旧,人人影视所有美剧也全面抛弃了R ...

  3. clip-path

    html代码: <div> <img src="BC0C62C1B1962A8A.jpg"> </div> css代码: img{ clip-p ...

  4. BeeFree - 在线轻松创建电子邮件消息

    Beefree 可以很容易地创建一个电子邮件消息,可以被用来发送企业简讯,宣布一个新产品,促进销售等.可以免费使用,您甚至不需要创建任何类型的帐户.您可以使用 Beefree 创建创新的,易于使用的电 ...

  5. sap去除后缀0方法

    原贴地址:http://fuhesap.com/SAP/179.html SHIFT str LEFT DELETING LEADING '0'.如果要在layout显示不出前面的0 格式: & ...

  6. 分分钟学会系列：mac地址泛洪攻击实验

    一.实验目的: 通过实战深入理解mac地址泛洪攻击的原理. 二.实验原理: 交换机中有一张非常重要的表,叫做mac表,这个表是一个硬件组成的表,主要是完成快速转发.mac表有大小限制,不同的交换机的m ...

  7. java发送固定字节到C++接口

    需求:java工程需要发送一个socket消息到C++接口,C++接口中规定了若干个参数,并且每个参数的长度是固定的,起始位置也是固定的, C++那边是GB2312编码,java这边是UTF-8. 现 ...

  8. 用Dart写的黑白棋游戏

    2013年11月,Dart语言1.0稳定版SDK发布,普天同庆.从此,网页编程不再纠结了. 在我看来,Dart语法简直就是C#的升级版,太像了.之所以喜欢Ruby的一个重要理由是支持mixin功能,而 ...

  9. Udp通讯(零基础)

    前面学习了Tcp通讯之后听老师同学们讲到Udp也可以通讯,实现还要跟简单,没有繁琐的连接,所以最近学习了一下,记录下来以便忘记,同时也发表出来与大家相互学习,下面是我自己写的一个聊天例子,实现了群聊私 ...

  10. 浅谈被加壳ELF(即android的so文件)的调试

    本文只讨论如何调试被加壳的ELF文件,包括调试中的技巧运用及调试过程中可能遇到的问题的解决方法,不包含如何还原加固的DEX本文将以某加壳程序和某加固为目标. 一.ELF格式简介 ELF全称:Execu ...