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. 前端编程tips

    1.ts less 网上搜视频教程,不用太复杂的,短短几分钟视频基本就对其入门了,比自己搜官网学习更方便. 常用的ts技术:let name:string="";  let obj ...

  2. springboot中Properties注解的实现

    关于@PropertySources注解的理解:http://www.imooc.com/article/252889?block_id=tuijian_wz public interface Pro ...

  3. I - All X

    F(x,m) 代表一个全是由数字x组成的m位数字.请计算,以下式子是否成立: F(x,m) mod k ≡ c Input 第一行一个整数T,表示T组数据. 每组测试数据占一行,包含四个数字x,m,k ...

  4. poj2342 Anniversary party

    Anniversary party Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8028   Accepted: 4594 ...

  5. profile和bashrc四种的区别

    Linux下profile和bashrc四种的区别 12160阅读 0评论 /etc/profile./etc/bashrc.~/.bash_profile.~/.bashrc很容易混淆,他们之间有什 ...

  6. a链接QQ客服 在小框口中打开 感觉不错

    <a href="javascript:;" onClick="javascript:window.open('http://wpa.qq.com/msgrd?v= ...

  7. MOT上海站 | 卓越研发之路:微服务之路

    微服务架构在带来灵活性.扩展性.可用性等优点的同时,其复杂性也给架构师们带来了很大的挑战.当你面对这些挑战一筹莫展时,不妨来参加由msup和微软联合推出的MOT线下沙龙活动吧,我们将给您答疑解惑. M ...

  8. linux文件系统变为只读解决

    linux控制台显示文件系统变为只读,需输密码或者按ctrl+d结束 输入root密码后执行fsck -y /dev/sda1,fsck -y /dev/sda2和fsck -y /dev/sda3等 ...

  9. 线程安全 Thread Safety Problem scala concurrency 并发

    小结: 1.基于java并发模型 Scala concurrency is built on top of the Java concurrency model. 2. 将每个请求放入一个新的线程 T ...

  10. Docker入门4------Dockerfile

    转自:https://www.cnblogs.com/jsonhc/p/7766841.html https://www.cnblogs.com/jsonhc/p/7767669.html Docke ...