时间戳

首页 > 解决方案 > Html/js单色字符

html - Html/js单色字符

问题描述

我目前正在尝试制作一个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 是一个带有数字的二维数组，drawer 是我正在写入的 div，并且在一个样式标签中，包括正确设置数字的样式

有什么帮助吗？

标签： html

解决方案

要达到预期的结果，请使用以下重写 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 性能

推荐阅读