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 ...
随机推荐
- Dynamic seq2seq in tensorflow
v1.0中 tensorflow渐渐废弃了老的非dynamic的seq2seq接口,已经放到 tf.contrib.legacy_seq2seq目录下面. tf.contrib.seq2seq下面的实 ...
- php.ini 开发和线上配置的差异
比对了一下php自带的php.ini-development和php.ini-production,备忘. display_errors = Ondisplay_startup_errors = On ...
- 在VS中为C/C++源代码文件生成对应的汇编代码文件(.asm)
以VS2017为例 然后重新生成工程,在工程目录中就会有对应的汇编代码文件.
- XML文档中的xmlns、xmlns:xsi和xsi:schemaLocation
文章转载自:https://yq.aliyun.com/articles/40353 相信很多人和我一样,在编写Spring或者Maven或者其他需要用到XML文档的程序时,通常都是将这些XML文档头 ...
- Spring AOP 随记
本周经历各种面试失败后,最后一站张建飞老大的阿里,感觉有着这般年纪不该有的垃圾履历而忧伤中,不过还是要继续加油的,毕竟他说的好,都是经历,无愧初心. 所以为了更加深入理解Spring AOP我又翻起了 ...
- pandas读取文件报错
path = 'D:/Postgraduate/Python/Machine Learning/小象学院机器学习/08.回归实践/8.Regression代码/8.Regression/8.Adver ...
- python全栈开发 * 线程锁 Thread 模块 其他 * 180730
一,线程Thread模块1.效率更高(相对于进程) import time from multiprocessing import Process from threading import Thre ...
- pytorch入门与实践-2.2
Tensor 1--本质上可以理解为具有不同维度的数组 2--支持的基本运算 |---创建Tensor: x=t.tensor(x,y) x,y 表示数组的大小 , x=t.rand(x,y), x ...
- css学习_css定位
1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute (拼爹型: ...
- POJ 3078 - Shuffle'm Up - [模拟题]
题目链接:http://poj.org/problem?id=3087 Description A common pastime for poker players at a poker table ...