更快,更高效地绘制表格

时间:2017-12-12 17:16:59

标签: html5 html-table logic processing-efficiency

我想知道你是否咳嗽帮助我在html脚本中加快速度。我试图画一张桌子并为每个td添加颜色,但它的速度非常慢

很抱歉,我只想复制代码:

<!DOCTYPE html>
<html>
<head>
<title>Random color</title>
<style type="text/css">
    body{margin:0;}

    table, td, tr{
        border-collapse: collapse;
    }

    table{
        margin: 0;
    }

    html, body, div, table{
        height: 100%;
    }
</style>
</head>
<body>
<div id="tableCont"></div>
<script type="text/javascript">
    var  pixels=400//window.screen.availWidth*window.devicePixelRatio;
    var html="<table>";
var rand1, rand2, rand3;

    for(var i=0; i<pixels; i++){
        html+="<tr>";
        for(var j=0; j<pixels; j++){
   rand1=Math.floor(Math.random()*256);
          rand2=Math.floor(Math.random()*256);
        rand3=Math.floor(Math.random()*256);

            html+='<td id="t' + (j+(i*pixels)) + '" style ="width: '+ Math.floor(window.screen.availWidth*window.devicePixelRatio/pixels) +'px; height: '+ Math.floor(100/pixels)+'%; background-color: rgb('+rand1+','+rand2+','+rand3+')"></td>'
        }
        html+="</tr>";
    }   
    html+="</table>";

 document.getElementById("tableCont").insertAdjacentHTML("beforeend", html);


</script>

</body>
</html>

0 个答案:

没有答案