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. 使用Pip在离线环境安装Python依赖库

    一.安装多个包 1.有网的服务器 1.生成requirement.txt文件 pip freeze >/tmp/wheel_pip/requirements.txt 这个命令会把当前环境下面的p ...

  2. C# windows GDI+仿画图 绘图程序设计

    C# windows GDI+仿画图 绘图程序设计 1.介绍 这里分享一个简单的画图程序 原作者:author: ping3108@163.com 2.程序主窗体设计 3.程序设计 本程序工程使用VS ...

  3. maven 中的mirror详解

    一.前言 今天同事遇到个问题,本来公司是有maven私服的,但同事觉得上面有些东西下载不到,于是在自己本地的maven配置中加了: <mirrors> <mirror> < ...

  4. shell脚本监控网站状态

    shell脚本监控网站状态 #!/bin/sh date=`date +"%Y%m%d-%H%M"` title="status" contentFail=&q ...

  5. Mesos和Docker的集成

    摘要: 众所周知,Mesos全面支持Docker.但是这意味着什么呢?在命令行里运行docker run...就可以使用Docker了.还需要做什么?让我们一起研究下Mesos的高级特性——和Dock ...

  6. update条件判断更新

    UPDATE cw_party tp, cw_shop tsSET tp.state = 3, ts.bonus_average = CASEWHEN ts.bonus_average > 0 ...

  7. ruby 基础知识2 - 区块 block

    原文 1. block中的 yield 与遍历 5.times do |i| puts i end 或者 def my_times(n) i = 0 while n > i i += 1 yie ...

  8. 百度地图API密钥

    百度地图API密钥 DD279b2a90afdf0ae7a3796787a0742e nSxiPohfziUaCuONe4ViUP2N   /*亲测可用*/ PlhFWpA02aoURjAOpnWcR ...

  9. 使用正则表达式进行某网页中的email邮箱抽取

    import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.FileReader; impo ...

  10. python-----python简介

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语言的编译器.Python这个名字,来自Guido所 ...