js 简单的进度条
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 简单的进度条的更多相关文章
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- Winfrom 简单的进度条小程序
使用Winform空间编写简单的进度条小程序: 所需控件:Lable 标签 TextBox 文本框 progressBar 进度条控件 timer 定时器 下面是源码及效果图: /// &l ...
- Linux shell 下简单的进度条实现
Linux shell 下简单的进度条实现 [root@db145 ~]# cat print_process.sh function Proceess(){ spa='' i= ] do print ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- html + css + jquery实现简单的进度条实例
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- JS网页顶部进度条demo
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Python——一个简单的进度条的实现
import math def process_bar(total_work,work_index,length): times = total_work / length # 长度倍数,用来缩放或扩 ...
- Linux中实现一个简单的进度条【转】
转自:http://blog.csdn.net/yuehailin/article/details/53999288 说起进度条,其实大家常常见到,比如说你在下载视频或文件的时候,提示你当前下载进度的 ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
随机推荐
- Lock 从来就没有成功过
package lime.thinkingInJava._021._005._003; import java.util.concurrent.ExecutorService; import java ...
- mac更改launchpad图标大小
设置每列显示的图标数目为8 defaults write com.apple.dock springboard-columns -int 8设置每行显示的图标数目为7 defaults write c ...
- k8s(3)-Pods和Nodes的概念
Pod是什么? 在前面创建部署时,Kubernetes创建了一个Pod来托管您的应用程序实例.Pod是一个Kubernetes抽象,表示一组一个或多个应用程序容器(如Docker或rkt),以及这些容 ...
- linux下vi或vim操作Found a swap file by the name的原因及解决方法
在linux下用vi或vim打开Test.java文件时 [root@localhost tmp]# vi Test.java出现了如下信息: E325: ATTENTION Found a s ...
- docker应用-6(mysql+mycat 搭建数据库集群)
上一节,通过使用overlay网络,搭建了跨主机的docker容器集群.下面,在这个跨主机的docker容器集群环境下,搭建mysql 数据库集群. mysql主从自动备份和自动切换 从数据安全性考虑 ...
- LeetCode - 703. Kth Largest Element in a Stream
Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...
- windows 安装mongodb
1.mongodb官网下载:http://www.mongodb.org/downloads 2.将下载的mongodb压缩包解压到对应文件夹,我的是:D:\pc\mongodb,请注意,我的bin目 ...
- JavaScript 运行机制详解
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- Ubuntu 安装 JDK8
安装python-software-properties $sudo apt-get install python-software-properties $sudo apt-get install ...
- 细说一下position(定位),以及其他的小知识
细说:position 位置 1.只要使用定位,必须要有一个相对的参照物.relative 2.具体定位的那个1元素需要加position:absolute:绝对的 绝对的:就是具体到某一个 ...