一个简单的进度条演示。

<!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. servletcontext监听器的启动位置以及tomcat和eclipse的目录结构

    情景: 想在应用启动的时候就加载spring容器 在ServletContextListener.contextInitialized()中加载spring容器 ApplicationContext ...

  2. 客观评价C#的优点和缺点

    对于C#,coder中可以分为2类:一类是C#死忠,对它赞赏到极点:另一类刚好相反,对它极度排斥. 本文将以全面.客观的方式评价这门语言,特别是语法方面. 其实很多人评价一门语言是带着一种感情色彩的. ...

  3. ubuntu15.10_x64 安装 nginx

      浏览器到 http://nginx.org/en/download.html 下载 stable version的nginx 如nginx-1.10.1.tar.gz,这是一个nginx源码包,需 ...

  4. JavaScriptOO.com – 快速找到你需要的 JS 框架

    JavaScriptOO.com 集合了目前 Web 开发中最常用的422(截至目前)款 JavaScript 框架,你可以根据功能类别(Ajax,动画,图表,游戏等)进行过滤和排序,快速找到你需要的 ...

  5. 定时器相关 setTimeout setInterval 函数节流

    这个问题也是在参加百度的前端技术学院中遇到的 任务中需要用js实现动画  导师给的评价中setInterval会导致bug 当时不理解   下面把自己学习的过程分享出来 再次理解单线程   老是说js ...

  6. Sublime text 3 快捷键的使用

    快捷键的便捷使用: ctr+shift+n:打开新的sublime text ctr+shift+w:关闭sublime text ctr+o:打开 某个文件 ctrl+n:新建一个文本 ctrl+w ...

  7. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  8. .Net资源总结

    源码文档见官方群(以下为7.4更新内容) 逆天工具 CDN 资源库 国内 Bootstrap中文网开源项目免费 CDN 服务 360网站卫士常用前端公共库CDN服务 百度静态资源公共库 新浪云计算CD ...

  9. 利用Canvas实现360度浏览

    前言:最近几个月来到新公司,主要从事移动端方面的开发,有时候也挺忙挺累的,于是就好一段时间没写博客了.其实自己在这几个月里,自己对canvas以及createjs和egret都有了一定程度上的认识与掌 ...

  10. 最简单的tab切换

    JS: $(".con").eq(0).show();    $(".btn span").click(function(){        var num = ...