Question

我目前正在尝试制作linux终端游戏的Web端口，贪婪。如果您曾经玩过，那么每个数字都有其自己独特的颜色，我需要在html中复制它。

我试图将它们放入<span style="color:#FF0000">标签中，尽管这样太懒了，无法使用chrome在我的计算机上以任何适当的速度运行。

drawGrid = function(){
drawer.innerHTML = ""
for(var i in board){
    for(var o in board[i]){
        drawer.innerHTML+="<span class='b"+board[i][o]+"'>"+board[i][o]+"</span>"
    }
    drawer.innerHTML+="<br>"
}}

board是一个带有数字的2d数组，drawer是我正在写入的div，并且在style标签中包括正确设置数字的样式

有帮助吗？

Answer 1

要获得预期的结果，请使用下面的选项将innerHTML重写如下

var drawer = document.getElementById('draw');
var board = {a: ['aa', 'aa2','aa3'], b: ['ba', 'ba2','ba3']};
drawGrid = function(){
drawer.innerHTML = "";
var html = ''  
for(var i in board){
    for(var o in board[i]){
        html+="<span class='b"+board[i][o]+"'>"+board[i][o]+"</span>"
    }
    html+= '<br>'
}
  drawer.innerHTML = html
}

span{
  border: 1px solid black
}

<div id = "draw"></div>
<button onclick="drawGrid()">Draw</button>

codepen-https://codepen.io/nagasai/pen/OqVqrN

请参考此链接以获取更多详细信息-.append VS .html VS .innerHTML performance

HTML / JS单色字符

1 个答案: