JS给小数点两侧的单个数字添加效果

最近写项目的时候实现了一个这样的效果

具体是这样实现的：思路是如果该数字含小数点，则分割左右两侧数据使它分成单个的数字，然后拼接渲染列表，如果不含小数点，则隐藏小数点，并且只渲染小数点左侧列表

注：代码是Vue版本的，每个数字后边是一张背景图片，在这里：

html代码：

        <div class="center-data">
            <ul class="point-left in-one-line"></ul>
            <i class="point in-one-line">.</i>
            <ul class="point-right in-one-line"></ul>
            <span class="in-one-line">KM²</span>
        </div>

js代码：

        initDigitDataStyle(){
          // 海岸带地表覆盖面积
          // 第一个数据小数点
          this.point = document.getElementsByClassName('point')[0];
          // 第一个数据小数点左侧
          this.pointLeftEle = document.getElementsByClassName('point-left')[0];
          // 第一个数据小数点右侧
          this.pointRightEle = document.getElementsByClassName('point-right')[0];
          // 渲染面积数据的样式
          this.splitData(this.coverArea,this.point,this.pointLeftEle,this.pointRightEle);
        },
        // 地表覆盖面积样式渲染，分开小数点前后数据
        splitData(data,point,pointLeftEle,pointRightEle){
          let dataS= data.toString();
          // 如果不含小数点，小数点和小数点右侧不渲染
          if(dataS.indexOf('.') == -1){
            point.style.display = 'none';
            // 只渲染左侧
            this.concatHtml(this.splitNum(dataS),pointLeftEle);
          }else{
            // 获取小数点左右数据并分割成单个数字,拼接渲染列表
            let pointLeft = dataS.split('.')[0];
            let pointRight = dataS.split('.')[1];
            let pointLeftArr = this.splitNum(pointLeft);
            let pointRightArr = this.splitNum(pointRight);
            this.concatHtml(pointLeftArr,pointLeftEle);
            this.concatHtml(pointRightArr,pointRightEle);
          }
        },
        // 分割单个数字
        splitNum(num){
          var digits = num.toString().split('');
          var realDigits = digits.map(Number);
          return realDigits;
        },
        // 拼接html渲染列表
        concatHtml(arr,ele){
          let htmlTem = '';
          arr.map(item=>{
            console.log(item);
            htmlTem += `<li>${item}</li>`;
          })
          ele.innerHTML = htmlTem;
        },

css代码：

  .center-data{
    height: 40px;
    text-align: center;
    font-size: 26px;
    color: #3e3e3e;
    font-family: Impact;
    font-size: 30px;
    padding-left: 36px;
  }
  .cover-area-data .center-data i{
    font-style: normal;
    font-size: 30px;
    position: relative;
    top: -8px;
  }
  .cover-area-data .center-data span{
    font-style: normal;
    font-size: 16px;
    font-family: 'Microsoft YaHei UI';
    font-weight: 500;
  }
  .cover-area-data .center-data /deep/ li{
    list-style: none;
    float: left;
    width: 30px;
    height: 40px;
    background-size: 100% 100%;
    background: url("../../assets/images/hlfjx-n.png") left top no-repeat;
    color: #fff;
    line-height: 40px;
    text-align: center;
    margin-right: 4px;
  }
  .cover-area-data .center-data /deep/ li:last-of-type{
    margin: 0;
  }
  .cover-area-data .in-one-line{
    display: inline-block;
  }