SOURCE

var exp = document.getElementById('expression');
var myans = document.getElementById('myanswer');
var digits = document.getElementsByClassName("digit");
var optionMul = document.getElementById('multiple');
var optionDiv = document.getElementById('divide');
var progress = document.getElementsByTagName('progress')[0];
var startTime = null;
var endTime = null;
var ansDigits = [];
var amount = 50;

//数字按键
for (let i = 0; i < digits.length; i++) {
	digits[i].addEventListener('click', function() {
    if (ansDigits.length < 2) {
			ansDigits.push(Number(this.innerText));
      showAnswer();
      if (checkAnswer()) {
        addAnswerList();
        questionIndex++;
        if (questionIndex >= amount) {
          document.getElementsByTagName('table')[0].scrollIntoView();
          findMax5();
          var tb = document.getElementsByTagName('table')[0];
          for (let t = 1; t < tb.rows.length; t++) {
            for (let i = 0; i < maxIndex.length; i++) {
              if (t === maxIndex[i][0] + 1) {
                tb.rows[t].className += "longest";
              }
            }
          }
        } else {
        	showQuestion();
        }
      }
    }
  }, false);
}

//检查答案是否正确
function checkAnswer() {
  if (questionIndex >= questions.length) {
    return;
  }
  var q = questions[questionIndex];
  if (q[3] === 1) {
    let a = ansDigits[0];
    if (ansDigits.length === 0) {
      return false
    } else if (ansDigits.length === 2) {
      a = a * 10 + ansDigits[1];
    }
    
    if (a === q[0] * q[1]) {
      q[2] = a;
      endTime = new Date();
      q[4] = ((endTime - startTime) / 1000).toFixed(2);
      questions[questionIndex] = q;
      return true;
    }
  } else if (q[3] === 2) {
    let a = ansDigits[0];
    let b = ansDigits[1];
    if (a * b === q[0] * q[1]) {
      q[2] = a * b;
      endTime = new Date();
      q[4] = ((endTime - startTime) / 1000).toFixed(2);
      questions[questionIndex] = q;
      return true;
    }
  }
  return false;
}

//显示输入的答案
function showAnswer() {
  if (questionIndex >= questions.length) {
    return;
  }
  var q = questions[questionIndex];
  if (q[3] === 1) {
    if (ansDigits.length > 0) {
    	myans.innerText = ansDigits.join("");
    }
  } else if (q[3] === 2) {
    if (ansDigits.length === 1) {
    	myans.innerText = ansDigits[0].toString() + " × ?";
    } else if (ansDigits.length > 1) {
      myans.innerText = ansDigits[0].toString() + " × " + ansDigits[1].toString();
    }
  }
}

//找到用时最长的5个算式
var maxIndex = [];
function findMax5() {
  maxIndex = [[-1, 0], [-1, 0], [-1, 0], [-1, 0], [-1, 0]];
  if (questions.length > 0) {
    for (let i = 0; i < questions.length; i++) {
      if (questions[i][4] !== null) {
        m = 0;
        for (let j = 1; j < maxIndex.length; j++) {
          if (maxIndex[j][1] < maxIndex[m][1]) {
            m = j;
          }
        }
        if (questions[i][4] > maxIndex[m][1]) {
          maxIndex[m][0] = i;
          maxIndex[m][1] = questions[i][4];
        }
      }
    }
  }
}

//清空答案
document.getElementById('clearAns').addEventListener('click', function(){
  ansDigits = [];
  showQuestion(false);
}, false);

//生成题目列表
document.getElementById('start').addEventListener('click', generate, false);
//跳过本题
document.getElementById('pass').addEventListener('click', function() {
  if (questionIndex >= questions.length) {
    return;
  }
  var q = questions[questionIndex];
  endTime = new Date();
  q[4] = ((endTime - startTime) / 1000 + 10).toFixed(2);//跳过，罚10秒
  questions[questionIndex] = q;
  addAnswerList();
  questionIndex++;
  showQuestion();
}, false);

var questions = [];
var questionIndex = 0;
function generate() {
  progress.setAttribute('max', amount);
  progress.setAttribute('value', 1);
  
  questions = [];
  ansDigits = [];
  maxIndex = [[-1, 0], [-1, 0], [-1, 0], [-1, 0], [-1, 0]];
  var tb = document.getElementsByTagName('table')[0];
  for (let i = tb.rows.length - 1; i > 0; i--) {
     tb.deleteRow(i);
  }
  for (let i = 0; i < amount; i++) {
    var a = Math.floor(Math.random() * 9) + 1;
  	var b = Math.floor(Math.random() * 9) + 1;
    var c = Math.random();
    var type = 0;
    if (optionMul.checked === true && optionDiv.checked === false) {
      type = 1;
    } else if (optionMul.checked === false && optionDiv.checked === true) {
      type = 2;
    } else if (optionMul.checked === true && optionDiv.checked === true) {
      if (c > 0.5) {
        type = 2;
      } else {
        type = 1;
      }
    } else {
      break;
    }
    //乘数1，乘数2，乘积，题型（true, mul, false, div），用时
    questions.push([a, b, a * b, type, null]);
  }
  questionIndex = 0;
  showQuestion();
}

function showQuestion(retiming = true) {
  if (questionIndex >= questions.length) {
    return;
  }
  
  progress.setAttribute('value', questionIndex + 1);
  document.getElementById('pno').innerText = (questionIndex + 1).toString() + '.';
  var q = questions[questionIndex];
  if (q[3] === 1) { //multiple
  	exp.innerText = q[0].toString() + ' × ' + q[1].toString() + " = ";
    myans.innerText = "?";
  } else if (q[3] === 2) { //divide
  	exp.innerText = (q[0] * q[1]).toString() + ' = ';
    myans.innerText = "? × ?";
  }

  ansDigits = [];
  //开始计时
  if (retiming) {
  	startTime = new Date();
  }
}

function addAnswerList() {
  var q = questions[questionIndex];
  if (ansDigits.length < 2) {
    ansDigits.push(q[0]);
    ansDigits.push(q[1]);
  }
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  td.innerText = questionIndex + 1;
  tr.appendChild(td);
  td = document.createElement('td');
  if (q[3] === 1) {
    td.innerText = q[0].toString() + " × " + q[1].toString() + " = " + q[2].toString();
  } else if (q[3] === 2) {
	  td.innerText = q[2].toString() + " = " + ansDigits[0].toString() + " × " + ansDigits[1].toString();
  }
  tr.appendChild(td);
  td = document.createElement('td');
  td.innerText = q[4].toString() + "秒";
  tr.appendChild(td);
  document.getElementsByTagName("table")[0].appendChild(tr);
}

<div id=wrapper>
  <h3 id=title>乘法口诀表练习</h3>
  <hr>
  <div id=options>
    题型：
    <input checked type=checkbox id=multiple /><label for=multiple>乘法</label>
    <input checked type=checkbox id=divide /><label for=divide>除法</label>
    <a id=start class="button button-3d button-pill button-action">重新出题</a>
  </div>
  <hr>
  <div id=problem>
    <div id=pno></div>
    <div><span id=expression>等待开始</span><span id=myanswer></span></div>

  </div>
  <progress value=1 max=50></progress>
  <hr>
  <div id=digits>
    <div>
      <a class="digit button button-3d button-primary button-rounded button-square">1</a>
      <a class="digit button button-3d button-primary button-rounded button-square">2</a>
      <a class="digit button button-3d button-primary button-rounded button-square">3</a>
      <a class="digit button button-3d button-primary button-rounded button-square">4</a>
      <a class="digit button button-3d button-primary button-rounded button-square">5</a>
    </div>
    <div>
      <a class="digit button button-3d button-primary button-rounded button-square">6</a>
      <a class="digit button button-3d button-primary button-rounded button-square">7</a>
      <a class="digit button button-3d button-primary button-rounded button-square">8</a>
      <a class="digit button button-3d button-primary button-rounded button-square">9</a>
      <a class="digit button button-3d button-primary button-rounded button-square">0</a>
    </div>
    <br>
    <div>
      <a id=pass class="button button-3d button-primary button-pill">跳过</a>
      <a id=clearAns class="button button-3d button-caution button-pill">清空答案</a>
    </div>
  </div>
  <hr>
  <div>
    <table>
      <tr>
        <th>序号</th>
        <th>算式</th>
        <th>耗时</th>
      </tr>
      <tr>
        <td>1</td>
        <td>5 × 4 = 20</td>
        <td>1.2秒</td>
      </tr>
      <tr class="longest">
        <td>1</td>
        <td>6 × 7 = 42</td>
        <td>1.2秒</td>
      </tr>
    </table>
  </div>
</div>

html, body {
  margin: 0;
  padding: 0;
}

#wrapper {
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
}

#title {
  text-align: center;
  height: 30%;
}

#options {
  padding: 15px;
  position: relative;
}

#start {
  position: absolute;
  top: 2px;
  right: 15px;
  font-size: 14px;
  padding: 0 15px;
}

#problem {
  text-align: center;
  font-size: 48px;
  position: relative;
}

progress {
  font-size: 6px;
  width: 100%;
}

#pno {
  position: absolute;
  left: 15px;
  top: 15px;
  font-size: 22px;
}

#digits {
  margin-top: 25px;
  text-align: center;
}

#digits div {
  margin: 18px 0;
}

#digits .button-square {
  margin: 0 5px;
  font-size: 24px;
  font-weight: bold;
}

.button {
  -webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;
}

table {
  font-family: verdana,arial,sans-serif;
  font-size:11px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}
table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}
table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
  text-align: center;
}

table tr.longest td{
  background-color: lightcoral;
}