Javascript jquery css 写的简单进度条控件

通过我们伟大的 CSS，可以实现非常漂亮的进度条样式。加上 Javascript 的效果，就可以完全“欺骗”我们的用户，让他们有耐心等待浏览器处理完成。上述的原理已经知道了，那么就可以直接看代码了。本人使用的还是 jQuery 框架，因为这样简短的代码可能会更容易理解。

当然这个控件还有很多需要完成的地方，我仅仅是提供了一种遵循 Web 标准的实现思路。废话不多说.

Javascript Progress Bar Demo - jb51.net

#progress {background: white; height: 20px; padding: 2px; border: 1px solid green; margin: 2px;}
#progress span {background: green; height: 16px; text-align: center; padding: 1px; margin: 1px;
display: block; color: yellow; font-weight: bold; font-size: 14px; width: 0%;}

var progress_node_id = "progress";
function SetProgress(progress) {
if (progress) {
$("#" + progress_node_id + " > span").css("width", String(progress) + "%");
$("#" + progress_node_id + " > span").html(String(progress) + "%");
}
}

var i = 0;
function doProgress() {
if (i > 100) {
alert("Progress Bar Finished!");
return;
}

if (i

Javascript 进度条 Demo

原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式），详细信息可以参见链接：http://www.jb51.net/article/13993.htm

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • Javascript/Jquery——简单定时器的多种实现方法

    第一种方法: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • js定时器(执行一次、重复执行)

    1,只执行一次的定时器 复制代码 代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 </scrip

  • javascript基于定时器实现进度条功能实例

    javascript基于定时器实现进度条功能实例

    本文实例讲述了javascript基于定时器实现进度条功能.分享给大家供大家参考,具体如下: Javascript 中的定时器 window度一线下面的方法 window.setInterval() 启动定时器 1.setInterval(function(函数),time(每隔多少时间执行一次函数,单位是毫秒)) 会重复执行某项操作 2.setTimeout 运用在延迟一段时间,再进行某项操作 setTimeout(function,time) ,setTimeout 不会重复! 停止定时器

  • js实现进度条的方法

    js实现进度条的方法

    本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f

  • JavaScript暂停和继续定时器的实现方法

    对于JavaScript的定时器来说没有严格意义上的暂停和重启,只有清除停止,但是可以通过一些'障眼法'实现 allChild[index].onclick = function(){//当点击目标且满足下面的条件时 让计时器时间暂停 if(gamInt == true){ $("#tu").css("display","block"); //计时器暂停(清除定时器) clearInterval(countdownTimer); //延迟2s后游

  • JavaScript定时器和优化的取消定时器方法

    通常用的方法: 启动定时器: 复制代码 代码如下: window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间,单位是毫秒 取消定时器: 复制代码 代码如下: clearInterval(Method); 那么问题来了.用 clearInterval(timerid);来清除,往往不能马上停止,用什么方法比较好解决? 优化方案如下 复制代码 代码如下: var timeout = false; //启动及关闭按钮  function ti

  • Javascript 定时器调用传递参数的方法

    无论是window.setTimeout 还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必需要带参数,这就需要想方法解决.例如对于函数hello(_name),它用于针对用户名显示欢迎信息: 复制代码 代码如下: var userName="Tony"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); } 这时,如果企图使用以下语句来使hello函

  • node.js中的定时器nextTick()和setImmediate()区别分析

    node.js中的定时器nextTick()和setImmediate()区别分析

    1.node中使用定时器的问题在于,它并非精确的.譬如setTimeout()设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms,再次轮到定时器时,已经耽误了4ms. 好了node中的定时器就简单的讲这么多. 2.看代码: 复制代码 代码如下: process.nextTick(function(){     console.log("延迟执行"); }); console.log("正常执行1"); console.log("正常执行2

  • JavaScript定时器详解及实例

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象)

  • javascript 进度条的几种方法

    javascript 进度条的几种方法

    我们先看看最终效果: 第一步,基本 构建基本的代码,看效果演示: 制作进度条的两种方法 *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:

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

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

随机推荐