js+css 实现的简易进度条效果

最新推荐文章于 2023-06-21 22:38:32 发布

gamebox1

最新推荐文章于 2023-06-21 22:38:32 发布

阅读量73

点赞数

分类专栏： javascript 文章标签： CSS JavaScript HTML ViewUI

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>
<style type="text/css">

</style>
<div id=d></div>
<input type=text id=p>
<input type=button οnclick="progressBar(d,p.value)" value="aaa">
</html>
<script type="text/javascript">
function progressBar(div,proValue){
//限定proValue大小
if(proValue<=0){
proValue=0;
}else if(proValue>=100){
proValue=100;
}
//获取进度条表格
var t=document.getElementById("progressBar");
//不存在则新建
if(t == null || typeof(t)=="undefined"){
t =document.createElement("table");
t.width='100';
t.border='1';
t.cellpadding='0';
t.cellspacing='0';
t.id="progressBar";
//控制表格的行
if(t.rows.length>0){
t.deleteRow(t.rows[0]);
}
//设置表格内样式
var nr=t.insertRow();
nr.className="tr1";
for(i=0;i<100;i++){
var nc = nr.insertCell();
nc.width=1;
nc.innerHTML=" "

}
}

//设置进度值
for(i=0;i<proValue;i++) {
t.rows[0].cells[i].className="value";
}
for(i=proValue;i<100;i++){
if(i==0){
t.rows[0].cells[i].className="td2";
}else if(i==100){
t.rows[0].cells[i].className="td1";
}else{
t.rows[0].cells[i].className="tr1";
}
}
div.insertBefore(t);

}
</script>

js+css 实现的简易进度条效果

gamebox1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+css 实现的简易进度条效果

&lt;html&gt;&lt;style type="text/css"&gt;&lt;!--.td1 {border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;border-top-style: solid;border-right-style: soli...
复制链接

扫一扫