最近写项目的时候实现了一个这样的效果
具体是这样实现的:思路是如果该数字含小数点,则分割左右两侧数据使它分成单个的数字,然后拼接渲染列表,如果不含小数点,则隐藏小数点,并且只渲染小数点左侧列表
注:代码是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;
}