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. Servlet、Tomcat访问(access)日志配置、记录Post请求参数

    一.运行环境: Maven:3.5.2(点击下载) ,下载页 Tomcat:8.5.29(点击下载) ,下载页 JDK:jdk1.7.0_80(点击下载) ,下载页 MavenDependency: ...

  2. ef报错:实体类型XXX不是当前上下文的模型的一部分。

    可能原因:.net框架版本与实体框架版本不匹配,比如:.net框架版本为4.5.实体框架版本为6.2. 解决方法:将实体框架版本降到6.0.

  3. 8051汇编:EQU指令

    关于EQU汇编指令 EQU是英文单词equal的缩写,因此我们也能对EQU指令有一个初步的认识:做等价替换使用. 在8051汇编语言中,EQU用于定义一个符号常量,其效果不会带来存储空间的占用(这和C ...

  4. vue重要项目的参考

    https://github.com/PanJiaChen/vue-element-admin vue项目参考  重点 https://github.com/opendigg/awesome-gith ...

  5. 自闭的D7

    先是一道**题然后我死了啊. A: 哇人人都会我不会系列. 我们可以运用逆向思维啊,把它转化成若干个人从点1进来, 然后我们考虑深度 dep,用 num[dep] 表示深度大于等于这个点的有多少个, ...

  6. 网页中顶部banner图自适应css

    //test.css .index-banner-top { width: 100%; background: url(../imgs/guanyu.png) no-repeat center cen ...

  7. 两矩阵各向量余弦相似度计算操作向量化.md

    余弦相似度计算: \cos(\bf{v_1}, \bf{v_2}) = \frac{\left( v_1 \times v_2 \right)}{||v_1|| * ||v_2|| } \cos(\b ...

  8. mac iterm 提示符序列调整

    mac终端提示符显示绝对路径太长了,能不能提示符不显示全路径呢?自定义提示符前缀呢? mac终端命令换行覆盖问题也顺带解决. 编辑~/.bash_profile export PS1='' 参数: 序 ...

  9. Python学习之旅(二十三)

    Python基础知识(22):进程和线程(Ⅰ) 1.多进程 (1)fork Python的os模块封装了常见的系统调用,其中就包括fork,可以在Python程序中轻松创建子进程 fork可以在Mac ...

  10. 转载http协议

    转载自:https://blog.csdn.net/weixin_38051694/article/details/77777010 1.说一下什么是Http协议 对器客户端和 服务器端之间数据传输的 ...