JS实现 进度条 不用控件 超级简单

http://www.jb51.net/article/61113.htm（转载出处）

setTimeout和clearTimeou


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<html>

<head>

<title>进度条</title>

<style type="text/css"> 

.container{ 

   width:450px; 

   border:1px solid #6C9C2C; 

   height:25px; 

 }

#bar{ 

   background:#95CA0D; 

   float:left;

   height:100%; 

   text-align:center; 

   line-height:150%;

 } 

</style> 

<script type="text/javascript"> 

  function run(){ 

        var bar = document.getElementById("bar");

        var total = document.getElementById("total");

    bar.style.width=parseInt(bar.style.width) + 1 + "%"; 

    total.innerHTML = bar.style.width;

    if(bar.style.width == "100%"){ 

      window.clearTimeout(timeout);

      return;

    }

    var timeout=window.setTimeout("run()",100);

  }

    window.onload = function(){ 

       run();

    } 

</script>

 

</head>

<body>

  <div class="container">

   <div id="bar" style="width:0%;"></div> 

  </div> 

  <span id="total"></span>

</body>

</html>

效果图：

<html> 

<head> 

<title>进度条</title> 

<style type="text/css"> 

.processcontainer{ 

   width:450px; 

   border:1px solid #6C9C2C; 

   height:25px; 

 }

#processbar{ 

   background:#95CA0D; 

   float:left;

   height:100%; 

   text-align:center; 

   line-height:150%;

 } 

</style> 

<script type="text/javascript"> 

 function setProcess(){ 

  var processbar = document.getElementById("processbar"); 

  processbar.style.width = parseInt(processbar.style.width) + 1 + "%";

  processbar.innerHTML = processbar.style.width; 

  if(processbar.style.width == "100%"){ 

     window.clearInterval(bartimer); 

  } 

 } 

var bartimer = window.setInterval(function(){setProcess();},100); 

window.onload = function(){ 

   bartimer; 

} 

</script> 

</head> 

<body> 

  <div class="processcontainer"> 

   <div id="processbar" style="width:0%;"></div> 

  </div> 

</body> 

</html>

效果图：

3.setTimeout和setInterval区别

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() ，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭，或者让 code 自身再次调用 setTimeout()。

希望本文所述对大家的javascript程序设计有所帮助。

时间： 2024-10-03 23:10:55

JS实现 进度条 不用控件 超级简单的相关文章

JS实现 进度条 不用控件

demo1 <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; float:left; height:100%; text-align:center; line-height:150%

wpf 水波进度条 用户控件

之前看公司web前端做了个 圆形的水波纹 进度条,就想用wpf 做一个,奈何自己太菜 一直做不出来,在看过 “普通的地球人” 的 “ WPF实现三星手机充电界面 博客之后 我也来照葫芦画个瓢. 废话不多说 先贴一下效果图 虽然样子 low 了些 但是基本满足我的需求了,下面是代码 前端 <UserControl x:Class="WaveProgress.UserControl.WaveProgressControl" xmlns="http://schemas.mic

js代码赋值触发select控件的onchange事件

嗯,现在在一个小公司实习,直接接触代码收获不小.  现在有个需求是4级联动的select过滤,需要js代码赋值并触发onchange来调用ajax方法,于是问题是怎样触发,找了些资料并且自己尝试了一下,验证无误. 代码在chrome.IE8.ff浏览器测试均通过,记在这里以备查阅~ <html> <head> </head> <body> <select id="sel" name="mysel" onchang

asp.net 不用控件 循环输出数据库数据的方法

不使用什么repeater gridview之类的控件,怎么才能输出数据库的数据到一个table ,我用response.write在后台,拼接 table 代码可以输出 但总是在页面的最上面 , 是不是要在aspx页面相应位置用<% %> 循环输出 但又提示找不到我后台填充的DATASET,因为听说公司做asp.net是不用控件的,想知道他们是怎么做输出数据库表格的,还请高手帮帮忙,谢谢了. 不明白来问我后台代码public string test = "";    pr

Js获取file上传控件的文件路径总结

总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = function(){ alert(getFullPath(this)) } function getFullPath(obj){ if(!obj){return;} if(!-[1,]){obj.select();return document.selection.createRange().text;} r

纯js模拟 radio和checkbox控件

代码待优化,功能实现了,不兼容ie8以上, 相同name的radio可以实现切换的操作, 分享代码,共同学习进步 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> .radiobox, .checkbox { width: 10px; height: 10px; padding: 2px; borde

js控制进度条到达100%跳转界面一

进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js控制进度条到达100%跳转界面</title></head>

【Javascript】JS获取ASP.NET CheckBoxList控件的Text和Value

由于在客户端用js是无法直接获取到ASP.NET的控件CheckboxList的值的,所以采用以下解解方案: 服务器端代码: public void LoadAllTags() { var tagList = tagBO.GetAllTags(); cbTagList.DataSource = tagList; cbTagList.DataTextField = "TagName"; cbTagList.DataValueField = "Id"; cbTagLis

mysql中以blob形式存储的图片文件 通过ajax方式传输 在js中设置成img控件的src

第一步,读取blob数据, 第二步,将blob数据转换成byte数组 第三步,将byte数据进行base64加密转换成字符串并回传 第四步,接收字符串 第五步,将img控件的src设置成"data:image/jpeg;base64,"+接收的字符串; 相关代码: java: public String getAccountImg(String alias) { String sql = "SELECT imgrawdata FROM wx_account WHERE ali