我试图通过仅使用一个for循环，一个二维数组或动态创建s来优化我的代码，但十进制字符应该像现在一样是静态的，因为我随机插入空格（＆amp; nbsp）在人物之间。请帮我优化代码。
以下是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test fonts</title>
<style>
@font-face{
font-family: 'test';
src: url('ArialMonospacedMTPro.otf');
}
.testCode_num {
font-family: 'test' !important;
height: auto;
font-size:26px;
display: inline-block;
}
.mainDiv {
border:1px solid red;
display: inline-block;
}
span{
color: #5DADE2;
}
body {
background-color: white;
padding-left: 70px;
}
</style>
</head>
<body>
<h1>Character Alignment for <span>Arial Mono MT Pro</span></h1>
<div id="checkChar_upperCase1" class = 'mainDiv'></div></br>
<div id="checkChar_upperCase2" class = 'mainDiv'></div></br>
<div id="checkChar_lowerCase1" class = 'mainDiv'></div></br>
<div id="checkChar_lowerCase2" class = 'mainDiv'></div></br>
<div id="checkChar_num" class = 'mainDiv'></div></br>
<div id="checkChar_spChar" class = 'mainDiv'></div></br>
<h4>French characters</h4>
<div id="checkChar_frenChar1" class = 'mainDiv'></div></br>
<div id="checkChar_frenChar2" class = 'mainDiv'></div></br>
<script>
var charDiv_upperCase1 = document.getElementById("checkChar_upperCase1");
var charDiv_upperCase2 = document.getElementById("checkChar_upperCase2");
var charDiv_lowerCase1 = document.getElementById("checkChar_lowerCase1");
var charDiv_lowerCase2 = document.getElementById("checkChar_lowerCase2");
var charDiv_num = document.getElementById("checkChar_num");
var charDiv_spChar = document.getElementById("checkChar_spChar");
var checkChar_frenChar1 = document.getElementById("checkChar_frenChar1");
var checkChar_frenChar2 = document.getElementById("checkChar_frenChar2");
/* Upper case */
var s_char_upper1 = [' ','A', ' ','B','C','D', ' ','E','F', ' ','G','H', ' ','I','J', ' ','K','L','M', ' '];
for(var i = 0; i < s_char_upper1.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_char_upper1[i];
charDiv_upperCase1.appendChild(ele);
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("Upper case Row1 i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
var s_char_upper2 = [' ', ' ','N', 'O','P', ' ','Q', 'R','S','T', ' ', 'U', ' ','V','W', ' ','X','Y', ' ','Z'];
for(var i = 0; i < s_char_upper2.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_char_upper2[i];
charDiv_upperCase2.appendChild(ele);
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("Upper case Row2 i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
/* Lower Case */
var s_char_lower1 = [' ','a', ' ','b','c','d', ' ','e','f', ' ','g','h', ' ','i','j', ' ','k','l','m', ' '];
for(var i = 0; i < s_char_lower1.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_char_lower1[i];
charDiv_lowerCase1.appendChild(ele);
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("Lower Case row1 i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
var s_char_lower2 = [' ', ' ', 'n','o', ' ','p', 'q','r', 's', ' ', 't','u', ' ','v','w', ' ','x', 'y', ' ', 'z'];
for(var i = 0; i < s_char_lower2.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
charDiv_lowerCase2.appendChild(ele);
ele.innerHTML = s_char_lower2[i];
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("Lower Case row2 i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
/* Numbers */
var s_char_num = [' ', '0', ' ','1','2', ' ','3','4','5', ' ', ' ','6','7', ' ','8','9','0','1', ' ','2'];
for(var i = 0; i < s_char_num.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_char_num[i];
charDiv_num.appendChild(ele);
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("Num Row i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
/*special characters 1 */
var s_char_spec = [' ', '!', ' ','"','#', ' ','$','%','&', '‹', ' ','(',')', ' ','*','+',',','-', ' ','.'];
for(var i = 0; i < s_char_spec.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_char_spec[i];
charDiv_spChar.appendChild(ele);
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("special chars Row1 i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
var frenchar_Upper = [' ', 'À', ' ', 'Â', 'Æ', ' ', 'Ç', 'Ê', ' ', 'Ë', 'Î', ' ', 'Ï', 'Ô', 'Œ', 'Û', ' ', '€', '₣', ' '];
for(var i = 0; i < frenchar_Upper.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = frenchar_Upper[i];
checkChar_frenChar1.appendChild(ele);
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("frenchar_Upper i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
var frenchar_Lower = [' ', 'à', ' ', 'â', ' ', 'æ', ' ', 'ç', 'ê', ' ', 'ë', ' ', 'î', 'ï',' ', 'ô', 'œ','ü','«','»'];
for(var i = 0; i < frenchar_Lower.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = frenchar_Lower[i];
checkChar_frenChar2.appendChild(ele);
var style = getComputedStyle(ele, null);
var charWidth = parseInt(style.width);
console.log("frenchar_Lower i: "+i+" value : " + ele.innerHTML + " width of char : "+ charWidth);
}
</script>
</body>
</html>