当分数大于等于20时,十位仅展示题目分数包含的位数。比如分数为30,十位仅展示0/1/2/3。
下面是要求和希望展示的效果
以下是目前写的逻辑,小于20的写完了,但是想不出大于等于20的写法
setManualMark(padding,score) {
if (this.props.show_manual_mark) {
if (this.props.manual_mark_type === 2) {
return (
<div id="manualMarkArea" className="graffiti">
<i className="prev-mark mark"></i>
<i className="after-mark mark"></i>
{new Array(21).fill('').map((item, index) => {
let boxStyle = '';
if (index === 20) {
boxStyle = <span className="graffiti-item" key={index}>0.5</span>;
} else {
boxStyle = this.setPreviewScore(index,score)
}
return boxStyle;
})}
</div>
);
} else {
return (
<div id="manualMarkArea" className="handwriting">
<span style={{ marginTop: padding }} />
</div>
);
}
}
}
/**
* @description: 设置分栏展示的数字 20分以上0-9,20分以下展示实际分数
* @param {*} index
* @param {*} score
* @return {*}
*/
setPreviewScore(index,score){// parseInt((score%100)/10) parseInt(score%10)
if(score >=20){
if(index === 0){
return (
<span className="graffiti-item" key={index}>0</span>
)
}
//想不出怎么写了。。。
}else{
const totalColumns = 20;
const startScore = totalColumns - (score + 1); // 因为一共21栏,最后一栏为0.5
return (
<span className="graffiti-item" key={index}>
{index >= startScore ? totalColumns - index - 1: ''}
</span>
)
}
}
写出来了,是我想复杂了