`

纯JS progressBar简单模拟

    博客分类:
  • js
阅读更多

效果图片,兼容IE FireFox Chrome

运行效果

progressbar.html

<html>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<head>
  <title>bar</title>
  <style>
   
   .barWidth{
      width:400px;
    }
		
   .bar{
      background-color:gray;     
      height:20px;
     
   }

   
   .bar0{
    background-color:blue;
    width:0px;
    height:20px;
   }

  .textBar{
    text-align:center;height:20px;line-height:20px;
    position:absolute;
  }
  
   
  </style>
<script src="bar.js"></script>
</head>


<body>

<div id="wq" class="bar barWidth">
<div id="nq" class="bar0"></div>
</div>
<div id="tx" class="textBar barWidth"></div>
<span id="zt">请点击start启动更新程序</span><br/><br/>
<input id="startbtn" type="button" value="start"/>

</body>
</html>

 javascript bar.js

 

function $(id){
   return document.getElementById(id);
}
function getRandomNum(Min,Max)
{   
var Range = Max - Min;   
var Rand = Math.random();   
return(Min + Math.round(Rand * Range));   
}   
 function getTop(e){  
        var offset=e.offsetTop;  
        if(e.offsetParent!=null) offset+=getTop(e.offsetParent);  
        return offset;  
        }  
function getLeft(e){  
        var offset=e.offsetLeft;  
        if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);  
        return offset;  
}  
function clock(){
       var n = getRandomNum(1,5);
      var width = $("nq").offsetWidth;
      var len = width+n;
      if (len>wqLen){
         len = wqLen;
      }
      showBar(len);        
      if (len == wqLen){
	 $("zt").innerHTML="系统更新成功!";    
	 window.clearInterval(int);   
      }
 }
function showBar(len){
     $("nq").style.width = len +"px";
     var percent = parseInt(len/wqLen*100);
     $("tx").innerHTML =  percent +"%";
}
var int,wqLen;
window.onload = function(e){
   var wq = $("wq");
   wqLen = wq.offsetWidth;
   $("tx").style.top = getTop(wq)+"px";
   $("tx").style.left  = getLeft(wq)+"px";
  $("startbtn").onclick = function(){
      $("nq").style.width = 0 +"px";
      $("zt").innerHTML="正在更新系统,请稍候...";
      int=self.setInterval("clock()", 100);
  };
}

 

 

  • 描述: 效果图
  • 大小: 75.1 KB
分享到:
评论

相关推荐

    基于三层感知机实现手写数字识别-内含源码和说明书.zip

    基于三层感知机实现手写数字识别-内含源码和说明书.zip

    setuptools-40.7.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    搭建VGG16神经网络实现图像分类-内含源码和说明书.zip

    搭建VGG16神经网络实现图像分类-内含源码和说明书.zip

    setuptools-40.6.1.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    华为OD机试D卷 - 判断字符串子序列 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    安享智慧理财测试项目Mock服务代码

    安享智慧理财测试项目Mock服务代码

    基于STM32单片机的智能晾衣架.zip

    基于单片机的系统

    Mamba selective-scan-cuda-linux-gnu.so

    安装成功后,还是遇到ImportError xxxx selective_scan_cuda.cpython-xxx-linux-gnu.so undefined symbol,用此编译好的文件进行替换即可

    基于Java EE的停车场管理系统.zip

    如今,我国现代化发展迅速,人口比例急剧上升,在一些大型的商场,显得就格外拥挤,私家车的数量越来越多,商场停车难得问题凸显,对于停车场的合理利用有助于缓解用户停车压力,鉴于这样的背景;初步设定系统功能主要包括,用户信息管理,违规车辆信息管理,刷卡停车牌管理,停车位信息管理,停车计费,信息查看管理等功能模块。本系统采用JAVAEE开发形式,利用数据库来完成数据存储功能,运用了B/S形式的开发模式,严格按照了软件工程的开发模式进行开发,保证系统的良好运行。

    华为OD机试D卷 - 免单统计 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    setuptools-2.2.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    ASP.NET《数据库原理及应用技术》课程指导平台的开发(源代码)

    ASP.NET《数据库原理及应用技术》课程指导平台的开发(源代码)

    setuptools-40.4.2.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-54.0.0-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    基于SpringBoot+Hadoop的评价预测系统的设计与实现+部署文档+全部资料 高分项目.zip

    【资源说明】 基于SpringBoot+Hadoop的评价预测系统的设计与实现+部署文档+全部资料 高分项目.zip基于SpringBoot+Hadoop的评价预测系统的设计与实现+部署文档+全部资料 高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    利用python的pyautogui函数实现简单的自动化操作

    1.安装python3.4以上版本,并配置环境变量(目前有装3.9遇到坑的,我个人用的3.7.6) 教程:https://www.runoob.com/python3/python3-install.html 2.安装依赖包 方法:在cmd中(win+R 输入cmd 回车)输入 pip install pyperclip 回车 pip install xlrd 回车 pip install pyautogui==0.9.50 回车 pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple 回车 pip install pillow 回车 这几步如果哪步没成功,请自行百度 如 pip install opencv-python失败 3.把每一步要操作的图标、区域截图保存至本文件夹 png格式(注意如果同屏有多个相同图标,回默认找到最左上的一个,因此怎么截图,截多大的区域,是个学问,如输入框只截中间空白部分肯定是不行的,宗旨就是“唯一”) 4.在cmd.xls 的sheet1 中,配置每一步的指令,如指

    setuptools-8.0.4.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-18.7.1.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-20.6.7.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    华为OD机试D卷 - 数据单元的变化替换 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

Global site tag (gtag.js) - Google Analytics