JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #msg{
      color: red;
    }
  </style>
</head>
<body>
  身份证号：<input id="id-card" type="text">（前17位）<br>
  （校验位）最后一位为：<span id="msg"></span><span id="check-digit"></span><br>
  <button onclick="calculate()">计算</button><br>
  <script>
    "use strict";
    // 前17位每项的系数
    let coefficient = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
    // 除11取余的结果对应的校验位（最后一位）的值
    let checkDigitMap = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
    function calculate(){
      var idCard = document.querySelector("#id-card");
      var checkDigit = document.querySelector("#check-digit");
      var msg = document.querySelector("#msg");
      var sum = 0;
      checkDigit.innerHTML = msg.innerHTML = "";
      if(idCard.value.length < 17){
        msg.innerHTML = "至少输入身份证前17位";
        return
      }
      for (var i = 0; i < 17; i++) {
        sum += idCard.value[i] * coefficient[i];
      }
      checkDigit.innerHTML = checkDigitMap[sum % 11];
    }
  </script>
</body>
</html>