如何在3个不同的行中显示数组内容？
我试图在三个不同的行中显示数组的内容，每行包含20个字符，包括单行中的空格。这是我的下面的代码，但它显示在一行。目前我的代码在单个div标签中提供输出。但是，我试图在3个不同的div标签中打印输出。
PS：如何将s_char_upper1数组分成3个不同的行，每行包含20个字符，并显示在我的html页面中。我附上了一个图像供您参考。我试图以这种格式显示页面。
var charDiv_upperCase1 = document.getElementById("checkChar_upperCase1");
/* Upper case */
var 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 < s_char_upper1.length; i++) {
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_char_upper1[i];
charDiv_upperCase1.appendChild(ele);
} @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;
} <!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>
</head>
<body>
<h1>Character Alignment for <span>Arial Mono MT Pro</span></h1>
<div id="checkChar_upperCase1" class = 'mainDiv'></div></br>
</body>
</html>
4 个答案:
答案 0 :(得分：1)
检查count是否值20然后将其附加到html
var charDiv_upperCase1 = document.getElementById("checkChar_upperCase1");
/* Upper case */
var 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 count = 0;
var s_chars = [];
for (var i = 0; i < s_char_upper1.length; i++) {
count++;
if (count == 20) {
s_chars.push(s_char_upper1[i]);
var ele = document.createElement("div");
ele.className = "testCode_num";
ele.innerHTML = s_chars.join(' '); // separate with space
charDiv_upperCase1.appendChild(ele);
count = 0;
s_chars = [];
} else {
s_chars.push(s_char_upper1[i]);
}
} @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;
}<h1>Character Alignment for <span>Arial Mono MT Pro</span></h1>
<div id="checkChar_upperCase1" class='mainDiv'></div>
<br>
答案 1 :(得分：1)
我不会将每个字符包裹在div中，而是在一个div中添加20个字符。要进行包装，您需要从display: inline-block;类的CSS中删除testCode_num。
您可以使用splice一次从数组中提取20个字符，并使用while循环确保您对所有字符进行处理：
while (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);
}
注意：数组文字中缺少逗号和缺少引号。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var charDiv_upperCase1 = document.getElementById("checkChar_upperCase1");
/* Upper case */
var 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',' '];
while (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);
}/* enable this when you have the font:
@font-face{
font-family: 'test';
src: url('ArialMonospacedMTPro.otf');
}
*/
.testCode_num {
font-family: 'test' !important;
height: auto;
font-size:26px;
border:1px solid red;
}
.mainDiv {
display: inline-block;
}
span{
color: #5DADE2;
}
body {
background-color: white;
padding-left: 70px;
}<h3>Character Alignment for <span>Arial Mono MT Pro</span></h3>
<div id="checkChar_upperCase1" class = 'mainDiv'></div></br>
答案 2 :(得分：0)
for(var i = 0; i < s_char_upper1.length; i++) {
改为
for(var j = 0; j < 3; j++) {
for(var i = 0; i < (s_char_upper1.length)/3; i++) {
请注意s_char_upper1.length不是3的倍数
答案 3 :(得分：0)
首先，感谢您花时间回答我的问题。此外，我从您的答案中获取了输入，并根据我的要求修改了我的代码。这是我和你们分享的代码。
PS：请随时修改我的代码并向我提供有关如何在以下代码中进一步改进的信息。
<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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？