javascript实现进度条

最新推荐文章于 2023-04-01 22:49:01 发布
最新推荐文章于 2023-04-01 22:49:01 发布
阅读量775 收藏
点赞数
文章标签： javascript function generator button div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JOEMAIL/article/details/1444107
版权
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">  
  <HTML>  
  <HEAD>  
  <TITLE>   New   Document   </TITLE>  
  <META   NAME="Generator"   CONTENT="EditPlus">  
  <META   NAME="Author"   CONTENT="">  
  <META   NAME="Keywords"   CONTENT="">  
  <META   NAME="Description"   CONTENT="">  
  </HEAD>  
   
  <BODY>  
  <SCRIPT   LANGUAGE="JavaScript">  
  <!--  
    function   TProgressBar(idstr,x,y,w,h,c,bgc,max,min)  
    {  
        this.idstr=idstr||"mypb";  
        this.obj=null;  
        this.min=min||0;  
        this.max=max||100;  
        this.x=x||100;  
        this.y=y||100;  
        this.width=w||204;  
        this.height=h||24;  
        this.color=c||"#FF6600";  
        this.bgcolor=bgc||"#E1E1E1";  
        this.pos=0;  
        this.percent=0;  
        this.Create=TProgressBar_Create;  
        this.Update=TProgressBar_Update;  
        this.Reposition=TProgressBar_Reposition;  
    }  
    function   TProgressBar_Update()  
    {  
          this.percent=Math.floor(this.pos/this.max*100);  
  if(this.percent>=100)  
  {  
      this.percent=100;  
      this.obj.width=this.width-4;  
  }  
  else  
  {  
              this.obj.width=Math.floor(this.pos/this.max*(this.width-4));  
  }  
  this.counter.innerHTML=String(this.percent)+"%";      
           
    }  
    function   TProgressBar_Create()  
    {  
          var   str="";  
  str+='<div   id="'+this.idstr+'_border"   style="position:absolute;   left:'+this.x+'px;   top:'+this.y+'px;   width:'+this.width+'px;   height:'+this.height+'px;   z-index:1;   background-color:   #000000;">';  
          str+='<div   id="'+this.idstr+'_bg"   style="position:absolute;   left:1px;top:1px;width:'+(this.width-2)+'px;   height:'+(this.height-2)+'px;   z-index:2;   background-color:   '+this.bgcolor+';">';  
                    str+='<div   id="'+this.idstr+'_main"   style="position:absolute;   left:1px;   top:1px;   width:1px;   height:'+(this.height-4)+'px;   z-index:3;   background-color:   '+this.color+';font-size:1px"></div>';  
                    str+='<div   id="'+this.idstr+'_counter"   style="position:absolute;width:10px;height:'+(this.height-4)+'px;left:'+(this.width/2-10)+'px;top:1px;z-index:3">0%</div>';  
  str+='</div></div>';  
  document.write(str);  
  this.obj=document.all[this.idstr+"_main"].style;  
  this.counter=document.all[this.idstr+"_counter"];  
    }  
    function   TProgressBar_Reposition()  
    {  
          this.pos=0;  
  //this.max=100;  
  this.Update();  
    }  
    var   PB=new   TProgressBar("mypb")  
    PB.Create()  
    PB.max=100;  
  function   test(){  
    //for(i=0;i<5;++i){  
        PB.pos++;  
  //   }  
        PB.Update();  
        if(PB.percent!=100)setTimeout("test();",100);  
  }  
  //-->  
  </SCRIPT>  
  <input   type=button   οnclick="test()"   value=add>  
  <input   type=button   οnclick="PB.Reposition()"   value=clear>  
  </BODY>  
  </HTML>  
JOEMAIL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
采用JavaScript实现进度条
weixin_45773291的博客
05-03 343
采用JavaScript实现进度条 效果图： 1.初始进度条 2.进度条完成 布局： <style type="text/css"> *{ margin: 0; padding: 0; text-align: center; } #w{ margin: 20px auto; width: 40rem; height: 1.25rem; border-radius: 1.25rem; border:
javascript 进度条
行者
12-28 487
新建一个JScsrip.js 文件  代码如下：  复制代码代码如下: function setPgb(pgbID, pgbValue,pvalues)  {  if ( pgbValue {  if (lblObj = document.getElementById(pgbID+'_label'))  {  lblObj.innerHTML =Math.ceil(
JavaScript进度条
Hocen_Jonin的博客
06-01 300
html> head> title>进度条title> style type="text/css"> .loadbar{ width:450px; background:#c6dcfa; height:20px; border-radius:10px ;
javascript进度条（js实例）
welcome
04-26 1708
利用javascript模拟下载进度条，可以防止重复点击。 思路：用两个div嵌套，开始时，初始时里面的div宽度为0，当点击下载时，让里面的div宽度一直+1，当加到100时停止。完成下载！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
JavaScript简单实现进度条
hua_0708的博客
07-19 318
主要用到了计时器，话不多说直接上代码 Html部分： Css部分： js部分： 效果图： setTimeout和setInterval区别 setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() ，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭，或者让 code 自身再次调用setTimeout()。 ...
【JavaScript源代码】原生JavaScript实现进度条.docx
12-30
原生JavaScript实现进度条 　JavaScript实现进度条的具体代码，供大家参考，具体内容如下　使用JavaScript实现进度条功能。　原理：通过鼠标移动事件，获取鼠标移动的距离。　步骤：　（1）html 中 div 布局 （2）...
JavaScript实现简单进度条效果
11-21
总的来说，使用JavaScript实现进度条效果主要涉及到DOM操作、事件监听、定时器的使用以及条件判断。这个例子提供了一个基础的框架，开发者可以根据自己的项目需求进行扩展和优化，使其更具个性化和功能性。希望这个...
javascript 进度条 实现代码
10-29
个例子是通过测试的。是真真正正根据记录的条数挂钩的。
用javascript实现进度条
10-20
用javascript实现进度条----
javascript与进度条
10-19
javascript与进度条
js实现简单的进度条
12-15
js实现简单的进度条，用于答题进度，分数指针
Javascript实现简单进度条
AC_greener的博客
11-22 7776
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="JSjindutiao.css"> <script src="JS%E8%BF%9B%E5%BA%A6%E6%9D%A1.js"> </script> </head> <body> <h1>Java
javaScript进度条
qq_59082106的博客
09-02 99
<html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box{ width:400px; height:300px; position:relative; border:solid1pxblack; margin:50...
教你用JavaScript制作进度条
小院里的霍大侠
12-07 1609
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
js实现进度条
自能生羽翼，何必仰云梯
10-19 539
&lt;body&gt;         &lt;table id =“load”width =“100％”border =“0”align =“center”bgcolor =“＃FAFAFA”cellpadding =“0”cellspacing =“0”bordercolor =“＃000000”style = “border-collapse：collapse;”&gt;         ...
利用JavaScript实现进度条加载界面(让你最简单最轻松学会+详写注释+完整代码)
Tang_jibin的博客
04-01 2988
在此之前，你需要对制作进度条有一个大概框架，只有框架构思好，才能完成心之所想。下面我就来给大家分析一下搭建思路思路分析首先我们需要明白进度条的组成：一个容器+一个内容区+定时器然后我们只需要把容器设置一个固定宽高，而内容区只需要一个高度足矣.接下来我们需要考虑的就是定时器的设置，让它能从0%-100%，最后显示加载完成。
js练手小项目——JavaScript实现进度条
JIAY_WX的博客
07-14 936
js练手小项目——JavaScript实现进度条
原生 JavaScript 实现进度条
weixin_44134972的博客
12-28 2314
原生JavaScript特效JavaScript实现进度进度条实现介绍html代码css样式JavaScript代码效果图整体代码 JavaScript实现进度 进度条实现介绍 使用JavaScript实现进度条功能。 原理：通过鼠标移动事件，获取鼠标移动的距离。 步骤： （1）html 中 div 布局 （2）css 样式编写 （3）JavaScript特效编写 html代码 &lt;body&...
javascript环形进度条
最新发布
08-15
JavaScript环形进度条常用于展示任务或操作的...通过以上步骤，我们可以实现一个基本的 JavaScript 环形进度条。需要注意的是，在实际情况中，具体的实现方式可能因需求而异，可以根据项目的需要进行相应的定制和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值