JS实现 进度条 不用控件
demo1
<html>
<head>
<title>进度条</title>
<style type="text/css">
.container{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#bar{
background:#95CA0D;
float:left;
height:%;
text-align:center;
line-height:%;
}
</style>
<script type="text/javascript">
function run(){
var bar = document.getElementById("bar");
var total = document.getElementById("total");
bar.style.width=parseInt(bar.style.width) + + "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "100%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",);
}
window.onload = function(){
run();
}
</script> </head>
<body>
<div class="container">
<div id="bar" style="width:0%;"></div>
</div>
<span id="total"></span>
</body>
</html>
demo2
<html>
<head>
<title>进度条</title>
<style type="text/css">
.processcontainer{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#processbar{
background:#95CA0D;
float:left;
height:%;
text-align:center;
line-height:%;
}
</style>
<script type="text/javascript">
function setProcess(){
var processbar = document.getElementById("processbar");
processbar.style.width = parseInt(processbar.style.width) + + "%";
processbar.innerHTML = processbar.style.width;
if(processbar.style.width == "100%"){
window.clearInterval(bartimer);
}
}
var bartimer = window.setInterval(function(){setProcess();},);
window.onload = function(){
bartimer;
}
</script>
</head>
<body>
<div class="processcontainer">
<div id="processbar" style="width:0%;"></div>
</div>
</body>
</html>
JS实现 进度条 不用控件的更多相关文章
- wpf研究之道-ProgressBar（进度条）控件
ProgressBar控件,非常有用.它在什么情况下有用呢?如何使用?带着这两个问题,我们探讨下. 如果程序需要很长时间来运行,用户在不知道的情况下,以为程序已经"卡死"了,没有响 ...
- wpf 水波进度条 用户控件
之前看公司web前端做了个 圆形的水波纹 进度条,就想用wpf 做一个,奈何自己太菜 一直做不出来,在看过 “普通的地球人” 的 “ WPF实现三星手机充电界面 博客之后 我也来照葫芦画个瓢. 废话不 ...
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS：让自己的控件动起来
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
- nprogress.js 头部进度条使用方法
nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...
- tbl.js div实现的表格控件,完全免费,no jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...
- tbl.js div实现的表格控件,完全免费,不依赖jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于&q ...
- JS脚本动态给元素/控件添加事件
最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...
- angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件
最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...
- JS组件系列——Bootstrap 树控件使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
随机推荐
- Oracle执行计划 explain plan
Rowid的概念:rowid是一个伪列,既然是伪列,那么这个列就不是用户定义,而是系统自己给加上的. 对每个表都有一个rowid的伪列,但是表中并不物理存储ROWID列的值.不过你可以像使用其它列那样 ...
- ID3和C4.5分类决策树算法 - 数据挖掘算法（7）
(2017-05-18 银河统计) 决策树(Decision Tree)是在已知各种情况发生概率的基础上,通过构成决策树来判断其可行性的决策分析方法,是直观运用概率分析的一种图解法.由于这种决策分支画 ...
- 高级架构进阶之HashMap源码就该这么学
引言--面试常见的问题 问:“你用过HashMap,你能跟我说说它吗?” “当然用过,HashMap是一种<key,value>的存储结构,能够快速将key的数据put方式存储起来,然后很 ...
- 使用WebClient下载网页，用正则匹配需要的内容
WebClient是一个操作网页的类 webClient web=new WebClient(): web.DownloadString(网页的路径,可以是本地路径);--采用的本机默认的编码格式 ...
- HTML（续）
1.有frame就无body,框架的noresize:设置框架大小不能改变.2.链接在框架中的应用target:有定为目标的功能.<a href = "链接源地址" targ ...
- MyEclipse配置默认自带的Java代码格式化
1.配置注释一大段代码块后,格式化代码,已经注释的代码仍然保持原样 (1)首先,Window -> Prefrences -> Java -> Code Style -> Fo ...
- Could not complete request
Could not complete request com.alibaba.dubbo.rpc.RpcException: Forbid consumer 10.254.1.26 access se ...
- django 生成动态的PDF文件
需要依赖库. WeasyPrint,它是一个Python库可以生成PDF文件从HTML模板中.安装WeasyPrint pip install WeasyPrint 创建一个PDF模板(templat ...
- P3157 [CQOI2011]动态逆序对（树状数组套线段树）
P3157 [CQOI2011]动态逆序对 树状数组套线段树 静态逆序对咋做?树状数组(别管归并QWQ) 然鹅动态的咋做? 我们考虑每次删除一个元素. 减去的就是与这个元素有关的逆序对数,介个可以预处 ...
- Solr导入MySQL数据之dataimport-handler
Solr不借助手动JSolr编程情况下也可以将Mysql的数据导入到Solr中.实现方式是安装dataimport-Handler从关系数据库将数据导入到索引库. 1.向SolrCore中加入jar包 ...