Javascript 如何在3个不同的行中显示数组内容？
我试图在三个不同的行中显示数组的内容，每行包含20个字符，包括单行中的空格。下面是我的代码，它可以工作，但显示在一行中。目前，我的代码在单个div标记中提供输出。但是，我试图在3个不同的div标签中打印输出 PS：我如何将s_char_upper1数组分成3行，每行包含20个字符，并显示在我的html页面中。我附上了一张图片供您参考。我正在尝试以这种格式显示页面。Javascript 如何在3个不同的行中显示数组内容？,javascript,html,css,Javascript,Html,Css,我试图在三个不同的行中显示数组的内容，每行包含20个字符，包括单行中的空格。下面是我的代码，它可以工作，但显示在一行中。目前，我的代码在单个div标记中提供输出。但是，我试图在3个不同的div标签中打印输出 PS：我如何将s_char_upper1数组分成3行，每行包含20个字符，并显示在我的html页面中。我附上了一张图片供您参考。我正在尝试以这种格式显示页面。 var charDiv_upperCase1=document.getElementById（“checkChar_upperC
var charDiv_upperCase1=document.getElementById（“checkChar_upperCase1”）；
/*大写字母*/
变量s_char_upper1=[' ','A', ' ','B','C','D', ' ','E','F', ' ','G','H', ' ','I','J', ' ','K','L','M', ' ', ' ', ' ','N', 'O','P', ' ','Q', 'R','S','T', ' ', 'U', ' ','V','W', ' ','X','Y', ' ','Z' ' ','a', ' ','b','c','d', ' ','e','f', ' ','g','h', ','i','j', ' ','k','l','m', ' '];
for（var i=0；i@font-face{
字体系列：“测试”；
src:url（'ArialMonospacedMTPro.otf'）；
}
.testCode_num{
字体系列：“测试”！重要；
高度：自动；
字号：26px；
显示：内联块；
}
梅因迪夫先生{
边框：1px纯红；
显示：内联块；
}
跨度{
颜色：#5DADE2；
}
身体{
背景色：白色；
左侧填充：70px；
}
测试字体
Arial Mono MT Pro的字符对齐
用于（变量i=0；ifor(var j = 0; j < 3; j++) {
for(var i = 0; i < (s_char_upper1.length)/3; i++) {
for（var j=0；j<3；j++）{
对于（变量i=0；i<（s_char_upper1.length）/3；i++）{
for(var j = 0; j < 3; j++) {
for(var i = 0; i < (s_char_upper1.length)/3; i++) {
for（var j=0；j<3；j++）{
对于（变量i=0；i<（s_char_upper1.length）/3；i++）{
如果s_char_upper 1.length不是3的倍数，请务必小心检查
count20var charDiv_upperCase1=document.getElementById（“checkChar_upperCase1”）；
/*大写字母*/
变量s_char_upper1=[' ', 'A', ' ', 'B', 'C', 'D', ' ', 'E', 'F', ' ', 'G', 'H', ' ', 'I', 'J', ' ', 'K', 'L', 'M', ' ', ' ', ' ', 'N', 'O', 'P', ' ', 'Q', 'R', 'S', 'T', ' ', 'U', ' ', 'V', 'W', ' ', 'X', 'Y', ' ', 'Z',
' ', 'a', ' ', 'b', 'c', 'd', ' ', 'e', 'f', ' ', 'g', 'h', ' ', 'i', 'j', ' ', 'k', 'l', 'm', ' '
];
var计数=0；
var s_chars=[]；
for（var i=0；i@font-face{
字体系列：“测试”；
src:url（'ArialMonospacedMTPro.otf'）；
}
.testCode_num{
字体系列：“测试”！重要；
高度：自动；
字号：26px；
显示：内联块；
}
梅因迪夫先生{
边框：1px纯红；
显示：内联块；
}
跨度{
颜色：#5DADE2；
}
身体{
背景色：白色；
左侧填充：70px；
}检查
count20var charDiv_upperCase1=document.getElementById（“checkChar_upperCase1”）；
/*大写字母*/
变量s_char_upper1=[' ', 'A', ' ', 'B', 'C', 'D', ' ', 'E', 'F', ' ', 'G', 'H', ' ', 'I', 'J', ' ', 'K', 'L', 'M', ' ', ' ', ' ', 'N', 'O', 'P', ' ', 'Q', 'R', 'S', 'T', ' ', 'U', ' ', 'V', 'W', ' ', 'X', 'Y', ' ', 'Z',
' ', 'a', ' ', 'b', 'c', 'd', ' ', 'e', 'f', ' ', 'g', 'h', ' ', 'i', 'j', ' ', 'k', 'l', 'm', ' '
];
var计数=0；
var s_chars=[]；
for（var i=0；iwhile (s_char_upper1.length) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_char_upper1.splice(0, 20).join('');
charDiv_upperCase1.appendChild(ele);
}
<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 {
border: 1px solid red;
font-family: 'test' !important;
height: auto;
font-size:26px;
display: inline-block;
}
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"></div></br>
<script>
var charDiv_upperCase1 = document.getElementById("checkChar_upperCase1");
/* Decimal values of Characters */
var charDynamicArray = [
' ', 'A', ' ', 'B', 'C', 'D', ' ', 'E', 'F', ' ', 'G', 'H', ' ', 'I', 'J', ' ', 'K', 'L', 'M', ' ', ' ', ' ', 'N', 'O', 'P', ' ', 'Q', 'R', 'S', 'T', ' ', 'U', ' ', 'V', 'W', ' ', 'X', 'Y', ' ', 'Z', ' ', 'a', ' ', 'b', 'c', 'd', ' ', 'e', 'f', ' ', 'g', 'h', ' ', 'i', 'j', ' ', 'k', 'l', 'm', ' ', ' ', ' ', 'n', 'o', ' ', 'p', 'q', 'r', 's', ' ', 't', 'u', ' ', 'v', 'w', ' ', 'x', 'y', ' ', 'z'];
var charArraylength = charDynamicArray.length;
var rowCount = Math.ceil(charArraylength / 20);
console.log(rowCount);
for(var i = 0; i < rowCount; i++) {
var ele = document.createElement("div");
var br_ele = document.createElement("br");
ele.className = "testCode_num";
ele.innerHTML = charDynamicArray.slice( 20 * i, 20 * (i+1)).join('');
ele.style.borderColor = "1px red";
charDiv_upperCase1.appendChild(ele);
charDiv_upperCase1.appendChild(br_ele);
}
</script>
</body>
</html>