一个简单的进度条演示。

<!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. selenium webdriver读取excel进行数据驱动测试

    最近做自动化需要从文件读取数据做参数化,网上发现一个不错的解决方案. 准备:新建一个excel文件,文件名为测试类名,sheet名为测试方法名         excel第一行为标题,从第二行开始为测 ...

  2. 通过rsync+inotify实现数据实时备份同步

    一.环境描述 测试环境 需求:服务器A与服务器B为主备服务模式,需要保持文件一致性,现采用sersync基于rsync+inotify实现数据实时同步 环境描述: 主服务器172.26.7.50 ,从 ...

  3. jQ获取浏览器window的高宽

    Window 对象Window 对象表示浏览器中打开的窗口.JavaScript 层级中的顶层对象,表示浏览器窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创 ...

  4. Welcome Phalcon

    Welcome! 欢迎来到 Phalcon 框架, 一种崭新的 PHP 框架.我们的使命是给开发者一个开发 web 站点和应用的高级工具,让开发者不用担心框架的性能问题. Phalcon 是什么? P ...

  5. 运用Gulp压缩文件编译文件。包括css js html image

    安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...

  6. 定制Eclipse IDE之插件篇（二）

    上文回顾:定制Eclipse IDE之插件篇(一) 延续上一篇的插件篇,这一篇将会讲到一个最关键的插件aptana. 一.aptana插件 官方的解释我就不说了,从下面图可以看到插件提供了什么功能,列 ...

  7. OC笔记

    self的概念:指向了当前对象(方法的调用者) self的用途 可以利用  self -> 成员变量名  访问当前对象内部的成员变量 [self 方法名];  调用其他对象方法或者类方法 所有继 ...

  8. 开发Android系统内置应用小记

    Android系统内置应用可以使用更多的API.更高的权限,与开发普通应用最大的差别在于编译,内置应用编译需要用到Android.mk文件.下面是我在开发过程中的一些小记. 1.在AndroidMai ...

  9. 我的Android第四章：Android的adb命令使用以及SQlite数据库运用

    adb是什么?:adb的全称为Android Debug Bridge,就是起到调试桥的作用.      adb有什么用?:借助adb工具,我们可以管理设备或手机模拟器的状态.还可以进行很多手机操作, ...

  10. 安装pods 遇到的坑

    1.  ERROR:  While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/pod 苹果系统升级 OS ...