简易进度条

最新推荐文章于 2023-02-27 15:44:27 发布

哼,小呀么小胖子

最新推荐文章于 2023-02-27 15:44:27 发布

阅读量289

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102518889

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

最终样式
在这里插入图片描述
所用知识点:

setInterval(function(){
count();
},1000)
每隔1000ms执行一次count函数
clearInterval() 停止setInterval方法

可视宽,高 document.documentElement.clientWidth / document.documentElement.clientHeight

DOM样式:
ele.style.property=value
property(属性)内的值不支持-,当出现-时,将其去掉,并采用驼峰命名法,例font-size为fontSize

//获取元素样式
ele.style.property  //行内样式
//现代浏览器
getComputedStyle()[]    
//IE浏览器
ele.currentStyle[]或ele.currentStyle.   
//兼容性问题的写法:
   function getStyle(ele,property){
     if(getComputedStyle){
        return getComputedStyle(ele)[property];
      }else{
        return currentStyle[property];}
     }

getComputedStyle是函数的定义,判断该函数是否存在,getComputedStyle()是函数的声明,将运行该函数,所以上述兼容性写法使用getComputedStyle

法一:

29练习1_简易进度条

    #progress {
      position: relative;
      margin: auto;
      top: 200px;
      display: block;
      width: 800px;
      height: 40px;
      border-style: dotted;
      border-width: thin;
      border-color: darkgreen;
    }
    #filldiv {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 0px;
      height: 40px;
      background: -webkit-linear-gradient(right, #f00, #00f);
    }
    #percent {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 32px;
    }
  </style>
</head>

<body>
  <div id="progress">
    <div id="filldiv"></div>
    <span id="percent">0</span>
  </div>
</body>

<script>
  var oPercent = document.querySelector('#percent');
  var oFilldiv = document.querySelector('#filldiv');
  var oProgress = document.querySelector('#progress');
 	 //用于计算百分比
  var count = 0;
  	//定时器,每隔一定时间调用该方法,达到动态的效果
  var timer = setInterval(function () {
  count++;
   	//如果到达100,则说明百分比加载完,清除定时器
    if (count >= 100) {
      clearInterval(timer);
      count = 100;
    }
    	//填入百分比
    oPercent.innerHTML = count + '%';
    	//使oFilldiv的宽度随着百分比的改变而改变
    oFilldiv.style.width = oProgress.clientWidth * count / 100 + 'px';
  }, 100);
</script>
</html>

法二:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #progress {
      position: relative;
      margin: auto;
      top: 200px;
      display: block;
      width: 800px;
      height: 40px;
      border-style: dotted;
      border-width: thin;
      border-color: darkgreen;
    }

    #filldiv {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 0px;
      height: 40px;
      background: -webkit-linear-gradient(right, #f00, #00f);
    }

    #percent {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 32px;
    }
  </style>
</head>

<body>
  <div id="progress">
    <div id="filldiv"></div>
    <span id="percent">0</span>
  </div>
</body>
<script>
  var pro = document.getElementById("progress")
  var per = document.getElementById("percent");
  var fill = document.getElementById("filldiv");
  var timer;
  //获取pro的width属性,并截取px之前的数字
  var proWidth = getComputedStyle(pro)['width'].slice(0, -2);
  var result;
  //点击时启动进度条
  pro.onclick = function () {
    timer = setInterval(function () {
  //获取fill的width属性,并截取px之前的数字   
    var fillWidth = getComputedStyle(fill)['width'].slice(0, -2);  //string
    //fillWidth的结果是字符串类型,要进行比较或计算必须先强制转化为数字类型
      fillWidth = Number(fillWidth);
      //如果填充的fill小于等于容器pro的宽度,则计算百分比,否则清除计时器
      if (fillWidth <= proWidth) {
        //百分比的计算,需先保留两位小数以后*100
        result = Math.floor(((fillWidth / proWidth).toFixed(2)) * 100) + "%";
        //填充的fill的宽度在不断变化
        fillWidth = Number(fillWidth) + 10;
        //并将其宽度赋值给对应属性
        fill.style.width = fillWidth + "px";
        //显示百分比
        per.innerHTML = result;
      } else {
        clearInterval(timer)
      }
    }, 100);
  }
</script>

</html>

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易进度条

最终样式所用知识点:setInterval(function(){count();},1000)每隔1000ms执行一次count函数clearInterval() 停止setInterval方法可视宽,高 document.documentElement.clientWidth / document.documentElement.clientHeightDOM样式:ele....
复制链接

扫一扫