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. Nginx、haproxy反向代理设置

    Nginx反向代理配置: #user nobody; worker_processes ; events { worker_connections ; } http { include mime.ty ...

  2. JDBC driver for MySQL连接提示"The connection property 'zeroDateTimeBehavior' acceptable values are: 'CONVERT_TO_NULL', 'EXCEPTION' or 'ROUND'. The value 'convertToNull' is not acceptable."解决方案

    1.使用了8.0以上版本的JDBC driver for MySQL,降回5.x版本. 2.不对JDBC driver for MySQL降级.修改数据库连接字符串,添加serverTimezone属 ...

  3. Netty5+Jboss(Marshalling)完成对象序列化传输

    TCP在网络通讯的时候,通常在解决TCP粘包.拆包问题的时候,一般会用以下几种方式: 1. 消息定长 例如每个报文的大小固定为200个字节,如果不够,空位补空格: 2. 在消息尾部添加特殊字符进行分割 ...

  4. Windows下使用VS2017搭建FLTK开发环境

    环境介绍 系统:win10 64位 IDE:VS 2017 Community FLTK版本:1.3.4-2 下载FLTK 截止到本文编写,FLTK的最新稳定版本是1.3.4-2.我们从官网(www. ...

  5. linux Ubuntu系统安装百度aip

    1.下载百度api pip install baidu-aip 2.配置视频转码工具ffmpeg Ubuntu16.04下安装FFmpeg(超简单版) 第一步:添加源. sudo add-apt-re ...

  6. ThinkPHP 缓存技术详解 使用大S方法

    如果没有缓存的网站是百万级或者千万级的访问量,会给数据库或者服务器造成很大的压力,通过缓存,大幅减少服务器和数据库的负荷,假如我们把读取数据的过程分为三个层,第一个是访问层,第一个是缓存层,第三个是数 ...

  7. MGF 637: Financial Modeling

    MGF 637: Financial ModelingSpring 2019Extra Credit AssignmentInstructions: This is an extra credit o ...

  8. 3、LwIP协议栈规范翻译——概述

    3.概述 像许多其他TCP/IP实现一样,分层协议设计已经成为设计lwIP实现的指南.每个协议实现为自己的模块,其中几个功能充当每个协议的入口点.尽管协议层是单独实现的,一些层却不全是,正如前面所叙述 ...

  9. java框架之Spring(3)-JDBC模板使用&事务管理

    下面内容使用到的 jar 包下载 JDBC模板使用 入门 1.导包,如要导入 Spring 的基本开发包.数据库驱动包.Spring 提供的 JDBC 模板包,如下: 2.测试: @Test publ ...

  10. Spark MLlib之使用Breeze操作矩阵向量

    在使用Breeze 库时,需要导入相关包: import breeze.linalg._ import breeze.numerics._ Breeze创建函数 //全0矩阵 DenseMatrix. ...