我的位置：首页 › 大数据分析-亿信BI › BI-心得体验 › 脚本实现——大屏板块数字，告别letter-spaci ...

脚本实现——大屏板块数字，告别letter-spacing+背景图片的方式转至元数据结尾

复制链接 | 收藏本帖

2323

: 大白小试身手Lv3

发表于2019-10-12 18:37

楼主

本帖最后由大白于 2020-6-3 17:25 编辑

需求来源：

在制作大屏时，美工经常提供板块式数字效果，之前我们通过letter-spacing+背景图片+各种细节对齐调节的方式，来完成美工提供的效果图，但是这样实现也是十分麻烦的，经常无法做到对齐，如果字体大小改变，还需要重新对齐重新找美工要背景图等等。

实现方式：

1、用表格获取数据库的数据

2、表格获取的数据，设置是否显示千分符

3、在客户端添加如下脚本：

// 定义变量获取表格中数字
var inNum1='<#=GRID1.A1.txt#>';

/**

divId：表格中的容器id,用户存放转化后的数字
inNum:传入的数字或字符
fSize：字体大小
fColor：字体颜色
outDivWidth：字体背景块宽度
outDivHeight：字体背景块高度
outDivbackgroundColor：字体背景块颜色
outDivMargin：块间距
middleFlag:字体是否相对居中（1：是 0：否）,否的情况下，字体起始位置为容器divId的左边框位置

**/

function getSpecial(divId,inNum,fSize,fColor,outDivWidth,outDivHeight,outDivbackgroundColor,outDivMargin,middleFlag){
//定义数组，数字转化为数组
var changeArray=inNum.split('');
//数组长度
var numLen=changeArray.length;
//定义变量存储拼接的 html
var htmlString='';
//用来存放字体样式相关css
var fontStyle='font-size:'+fSize+';color:'+fColor;

//定义字符串，用了存放字体背景块样式相关css
var divStyle='width:'+outDivWidth+';height:'+outDivHeight+';background-color:'+outDivbackgroundColor+';margin-right:'+outDivMargin;

//存放板块数字的容器的宽度
var divTotalWidth=parseInt(outDivWidth)*numLen+(numLen-1)*5;

//让每个背景块横向显示，让板块数字外层容器宽度和内容总宽度匹配
$('#'+divId).css('display','-webkit-box');
$('#'+divId).css('width',divTotalWidth+'px');

//根据判断middleFlag，来进行设置是否相对居中
if(middleFlag==1){
$('#'+divId).css('left',parseInt($('#'+divId).parent().css('width'))/2-divTotalWidth/2+'px');
}

//循环变量每个字符，拼接出需要的html标签（每个字符的字体以及背景块）
for(i=0;i<numLen;i++){
htmlString+='<div style="'+divStyle+'"><span style="vertical-align:middel;text-align:center;'+fontStyle+'">'+changeArray+'</span></div>';
}

//将拼接后的字符串设置到定义容器中
$('#'+divId).html(htmlString);
}

//执行定义的函数
getSpecial('HHH8',inNum1,'20px','yellow','20px','30px','#339966','5px',0);

实现效果如下：

[size=13.3333px]发散思维：
[size=13.3333px]上面脚本中的fontStyle和divStyle等内容，可以设置背景图片等等，只需要修改对应字符串模块就可以了~~~
[size=13.3333px]下面是样式背景和字体样式完全在字符串中自定义的方式，而且浮点数的. 可以选择是否设置背景的脚本
[size=13.3333px]/**
[size=13.3333px]divId：表格中的容器id,用户存放转化后的数字
inNum:传入的数字或字符
middleFlag:字体是否相对居中（1：是 0：否）,否的情况下，字体起始位置为容器divId的左边框位置
pointFlag:点是否需要背景（1：是 0：否）
[size=13.3333px]**/
[size=13.3333px]function getSpecial(divId,inNum,middleFlag,pointFlag){
//定义数组，数字转化为数组
var changeArray=inNum.split('');
//数组长度
var numLen=changeArray.length;
//定义变量存储拼接的 html
var htmlString='';
//用来存放字体样式相关css
var fontStyle='font-size:40px;color:#ffffff';
[size=13.3333px]//定义字符串，用了存放字体背景块样式相关css,背景块字体大于等于字体大小
var divStyle="text-align:center;vertical-align:midde;line-height:1.5;width:40px;height:60px;background:url('vfs/root/products/ebi/sys/picture/demo图标列表/cell_bg.png');background-size:100% 100%;margin-right:5px;margin-right:5px";
var divPointStyle="width:20px;height:30px;margin-right:5px";
[size=13.3333px]//存放板块数字的容器的宽度
var divTotalWidth=20*numLen+(numLen-1)*5;
[size=13.3333px]//让每个背景块横向显示，让板块数字外层容器宽度和内容总宽度匹配
$('#'+divId).css('display','-webkit-box');
$('#'+divId).css('width',divTotalWidth+'px');
[size=13.3333px]//根据判断middleFlag，来进行设置是否相对居中
if(middleFlag==1){
$('#'+divId).css('left',parseInt($('#'+divId).parent().css('width'))/2-divTotalWidth/2+'px');
}
[size=13.3333px]//循环变量每个字符，拼接出需要的html标签（每个字符的字体以及背景块）
for(i=0;i<numLen;i++){
if(pointFlag==1){
if(changeArray.indexOf('.')>-1){
htmlString+='<div style="'+divPointStyle+'"><span style="vertical-align:middel;text-align:center;'+fontStyle+'">'+changeArray+'</span></div>';
}else{
htmlString+='<div style="'+divStyle+'"><span style="vertical-align:middel;text-align:center;'+fontStyle+'">'+changeArray+'</span></div>';
}
}else{
htmlString+='<div style="'+divStyle+'"><span style="vertical-align:middel;text-align:center;'+fontStyle+'">'+changeArray+'</span></div>';
}
}
[size=13.3333px]//将拼接后的字符串设置到定义容器中
$('#'+divId).html(htmlString);
}
[size=13.3333px]
//执行定义的函数
getSpecial('HHH4','<#=GRID1.A1.txt#>',1,0);