JS百分比详解

一、JS百分比基础

在JavaScript中，百分比可以表示为0.1、10%、50px等值，百分比的用法非常灵活，可以用来表示布局、尺寸大小等。

比如box的样式中，设置width为50%可以使其宽度为父元素宽度的50%。具体代码如下：

.box{
  width: 50%;
}

同样地，设置font-size:50%; 可以将字体大小调整为父元素字体大小的50%。

使用百分比可以使页面更加灵活：在不同的屏幕尺寸下，页面元素的展现可以被自动调整，更加适应不同的设备。

二、JS百分比布局

百分比布局是页面布局的一大利器，常见的有两种方式：伸缩布局和流体布局。

伸缩布局（flex布局）：flex布局是一种弹性布局方式，可以根据不同的容器尺寸自动调整子元素布局，实现响应式布局。它可以让页面元素随窗口大小而变化，并能够实现垂直和水平居中。比如下面这个代码示例：

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

流体布局：流体布局是一种宽度自适应的布局方式。页面元素的宽度以百分数表示，可以自动适应不同的屏幕尺寸。比如下面这个代码示例：

.box{
  width: 50%;
  float: left;
}

三、JS百分比动画

JS百分比可以用来实现动画效果，比如进度条、倒计时等。

进度条：我们可以通过JS控制CSS中的width属性来实现进度条效果。具体实现方式如下：

.progress{
  width: 0%;
  height: 5px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
.progress.active{
  width: 50%;
}

倒计时：我们可以用JS不断更新时间，然后计算出剩余时间所占总时间的百分比，再用CSS控制进度条的长度。比如下面这个代码示例：

function countdown(){
  var timeLeft = endTime - Date.now();
  var percentageLeft = timeLeft / totalTime * 100;
  var progressBar = document.getElementById("progress-bar");
  progressBar.style.width = percentageLeft + "%";
  if(timeLeft > 0){
    setTimeout(countdown, 500);
  }
}

四、JS百分比插件

JS百分比插件是一种快速实现一些常用百分比效果，比如滚动条、轮播图等的方法。

比如实现一个简单的滚动条插件：

(function($){
  $.fn.scroll = function(options){
    var defaults = {
      color: 'blue',
      barHeight: 5,
      barWidth: '100%',
      duration: 500,
      easing: 'ease-out'
    };
    var settings = $.extend({}, defaults, options);
    
    return this.each(function(){
      var wrapper = $(this);
      wrapper.css('position', 'relative');
      var content = wrapper.children().eq(0);
      var contentHeight = content.height();
      var wrapperHeight = wrapper.height();
      var percentageLeft = (contentHeight - wrapperHeight) / contentHeight * 100;
      var scrollBar = $('
  
');
      scrollBar.css({
        'height': settings.barHeight + 'px',
        'width': settings.barWidth,
        'background-color': settings.color,
        'position': 'absolute',
        'bottom': 0,
        'left': 0,
        'z-index': 1,
        'cursor': 'pointer',
        'opacity': 0.6,
        'transition': 'all ' + settings.duration + 'ms ' + settings.easing
      });
      wrapper.append(scrollBar);
      
      scrollBar.on('mousedown', function(event){
        event.preventDefault();
        var startY = event.pageY;
        var startTop = parseFloat(scrollBar.css('top'));
        var wrapperTop = wrapper.offset().top;
        var lastUpdateTime = Date.now();
        
        $(document).on('mousemove', function(event){
          event.preventDefault();
          var currentTime = Date.now();
          var timeDiff = currentTime - lastUpdateTime;
          var distanceY = event.pageY - startY;
          var scrollTop = wrapper.scrollTop();
          var delta = percentageLeft / wrapperHeight;
          var move = distanceY * delta;
          var top = Math.min(Math.max(0, startTop + move), wrapperHeight - settings.barHeight);
          scrollBar.css('top', top + 'px');
          wrapper.scrollTop(scrollTop + move / delta);
          lastUpdateTime = currentTime;
        });
        $(document).on('mouseup', function(event){
          event.preventDefault();
          $(document).off('mousemove');
          $(document).off('mouseup');
        });
      });
      
      wrapper.on('scroll', function(){
        var scrollTop = wrapper.scrollTop();
        var scrollHeight = wrapperHeight / contentHeight * wrapperHeight;
        var distance = scrollTop / (contentHeight - wrapperHeight);
        var top = distance * (wrapperHeight - settings.barHeight);
        scrollBar.css({
          'height': scrollHeight + 'px',
          'top': top + 'px'
        });
      });
    });
  };
})(jQuery);

五、JS百分比总结

JS百分比是前端开发过程中一个常见的工具，它可以实现页面的响应式布局、动画效果、以及一些实用的插件开发。随着移动设备的普及，百分比布局和响应式设计越来越受到关注，JS百分比很好地解决了这些问题。