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

最新推荐文章于 2023-06-20 21:27:08 发布

gamebox1

最新推荐文章于 2023-06-20 21:27:08 发布

阅读量424

点赞数

分类专栏： javascript 文章标签： css button function table null div

本文链接：https://blog.csdn.net/superherosk123/article/details/2666712

版权

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 实现的简易进度条效果

.td1 { border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-lef
复制链接

扫一扫