html部分

<div id='div1'>
<div id="div2"></div>
</div>

css部分

div{
height:10px ;
border-radius:5px;

}
#div1{
width:600px ;
background: #333;
}

js部分

<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
var num=+1;
timer =setInterval(function(){
if(num <= 100){
oDiv2.style.width=num+'%';
oDiv2.style.background='#2375E1';
num++
}else{
clearInterval(timer);
}
},1000)

}
</script>

js 简单的进度条的更多相关文章

  1. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  2. Winfrom 简单的进度条小程序

    使用Winform空间编写简单的进度条小程序: 所需控件:Lable 标签  TextBox  文本框  progressBar  进度条控件  timer 定时器 下面是源码及效果图: /// &l ...

  3. Linux shell 下简单的进度条实现

    Linux shell 下简单的进度条实现 [root@db145 ~]# cat print_process.sh function Proceess(){ spa='' i= ] do print ...

  4. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  5. html + css + jquery实现简单的进度条实例

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  6. JS网页顶部进度条demo

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. Python——一个简单的进度条的实现

    import math def process_bar(total_work,work_index,length): times = total_work / length # 长度倍数,用来缩放或扩 ...

  8. Linux中实现一个简单的进度条【转】

    转自:http://blog.csdn.net/yuehailin/article/details/53999288 说起进度条,其实大家常常见到,比如说你在下载视频或文件的时候,提示你当前下载进度的 ...

  9. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

  1. bootstrap引入文件方法

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  2. java基础---->自定义gradle的插件

    这里面简单的介绍一下gradle插件的编写. 自定义gradle插件 我们编写的gradle脚本一般是放在build.gradle文件中.所以首先创建一下build.gradle文件,下面的例子都是在 ...

  3. java的方法重载

    1丶java的方法重载特性 满足以下条件的两个或多个方法构成“重载”关系:(1)方法名相同 (2)参数类型不同,参数个数不同或者参数类型的顺序不同 像System.out.println一样,就是重载 ...

  4. 合并两个git仓库并保留提交记录

    case如下: 有2个git仓库:repo1.repo2: 想将repo1中的文件移入repo2: repo1的历史日志要保留:   1 2 # 1.将repo1作为远程仓库,添加到repo2中,设置 ...

  5. 逆向工程之修改关键CALL返回值_破解视频转换专家

    1)注册软件随便输入注册名注册码 2)进入软件根目录,发送到PEID查壳 3)发现无壳 4)发送到OD 4.1)右键菜单选择智能搜索 4.2)找到关键信息点注册 4.3)找到关键信息点双击进入汇编,向 ...

  6. WordCount扩展与优化

    合作者:201631062327,201631062128码云地址:https://gitee.com/LIUJIA6/WordCount3 一:项目说明 本次项目是在上次作业WorldCount的基 ...

  7. css3 伸缩布局 display:flex等

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. java异常处理解决方案

    一.异常概念 Throwable类是Java中所有错误或异常的超类. 1.只有当对象是此类(或其子类)的实例时,才能通过Java虚拟机或着Java throw语句抛出.     2.只有此类或其子类才 ...

  9. Elasticsearch学习笔记(三)聚合分析Agg

    一.设置fielddata PUT /index/_mapping/type {     "properties":{          "fieldName" ...

  10. JDBC最原始的代码做查询操作

    首先编写一个User类. public class User { private String username; private String password; public String get ...