当分数大于等于20时,十位仅展示题目分数包含的位数。比如分数为30,十位仅展示0/1/2/3?

当分数大于等于20时,十位仅展示题目分数包含的位数。比如分数为30,十位仅展示0/1/2/3。
下面是要求和希望展示的效果
image.png

image.png
以下是目前写的逻辑,小于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>
      )
    }
  }
阅读 1.4k
1 个回答
✓ 已被采纳

写出来了,是我想复杂了

 /**
   * @description: 设置分栏展示的数字 20分以上0-9,20分以下展示实际分数
   * @param {*} index
   * @param {*} score
   * @return {*}
   */  
  setPreviewScore(index,score){
    if(score >=20){
      return (
        <span className="graffiti-item" key={index}>
          {index >= 10 ? index % 10 : (index <= parseInt((score%100)/10) ? index % 10 : '')}
        </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>
      )
    }
  }

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题