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. python使用requests发送text/xml报文数据

    def client_post_xmldata_requests(request_url,requestxmldata): #功能说明:发送请求报文到指定的地址并获取请求响应报文 #输入参数说明:接收 ...

  2. 机器人学 —— 机器人感知(Location)

    终于完成了Robotic SLAM 所有的内容了.说实话,课程的内容比较一般,但是作业还是挺有挑战性的.最后一章的内容是 Location. Location 是 Mapping 的逆过程.在给定ma ...

  3. VBA 全局常量定义

    Public Const INDEX As Integer = 16 Public Const RESULT_SHEET As String = "result" Public C ...

  4. NodeJs使用nodejs-websocket + protobuf

    参考: HTML5+NodeJs实现WebSocket即时通讯 (某人的blog) nodejs-websocket使用示例 (www.npmjs.com网站,有示例) Buffer API (nod ...

  5. poj 2074

    哎怎么说,感觉现在处理平面上点线的题已经比较熟练了. 这题就离散化然后搞个前缀和就没了. 准备开始进一步的自闭了. 下面是disguss的一些样例... 其实是我自己写错了个地方,本来能1A的. #i ...

  6. mybatis06--动态sql

    1.if标签 public interface StudentDao { /** *动态sql的查询 参数是Student对象 不确定 用户输入几个属性值 */ List<Student> ...

  7. 微信小程序时间戳的转换及调用

    13位 的时间戳,如下图: 效果图: 1.(utils.js里面的代码): function formatTime(timestamp, format) { const formateArr = [' ...

  8. mui 滑块开关 进度条 以及如何获取值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. Java代码一行一行读取txt的内容

    public static void main(String[] args) { // 文件夹路径 String path = "E:\\eclipse work\\ImageUtil\\s ...

  10. PAT1111 Online Map【最短路】【dfs】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805358663417856 题意: 给定一个图,每天边上有时间和路 ...