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 ...
随机推荐
- c#判断是否有网络
//调用操作系统API [System.Runtime.InteropServices.DllImport("wininet")] private extern static bo ...
- Kindeditor视频上传问题处理
初始的时候,video这个标签kindeditor是不识别的,只要html处理或者全屏的时候,都会被排除掉.如果想要video存在,则需要设置属性filterMode :false 如果只是想要某个标 ...
- Python学习之解决python下载第三方依赖速度慢的问题
原因:通过pip命令直接下载,一般下载的资源存放在国外的服务器上,导致下载速度慢.下载过程中报错: 解决方法:通过pip的命令参数,从国内的下载源,国外的替换为国内的镜像,进行目标包的下载: 具体参数 ...
- HTTPS 通讯流程
原文地址 https://blog.csdn.net/wangweilica6/article/details/50171457 一.简介 前一篇文章,我总结了下,如何部署https服务,开通ssl通 ...
- VS2017 安装打包插件
安装 打开VS2017:工具 --> 扩展和更新 --> 联机,搜索Microsoft Visual Studio 2017 Installer Projects,如下图: 在搜索中输入: ...
- nvm的安装
安装前可先卸载原来的node, npm, 安装成功后,可用nvm装node 一.用nvm-noinstall.zip安装 1.nvm-windows 下载 https://github.com/cor ...
- background-color:transparent
background-color没有none值 在工作中发现, 这样是没反应的, 要写这个样式才能去掉背景颜色() background-color属性详细链接: http://www.w3sch ...
- 几个dos命令
- String字面量
public class assa{ static String ee = "aa";//ee指向常量池中的aa static String ff = new String(&qu ...
- HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...