Javascript 创建动态间隔垂直线的背景

我有一个相当复杂的视图，包括一个垂直线的背景网格，每个网格代表5分钟的时间段。这些线的间距是动态的，高度也是动态的。下面是我当前生成它们的方式

**snip**
outtxt_norm = '<div class="tl-td" style="width: ' + 
              (TIME_SECONDSPERHALFHOUR*_scale/6) + 
              'px; height: ' + (_table_height) + 'px;"></div>';
outarr = [];
for(idx = 0, difference = 288*totaldays; idx < difference;){
     outarr[idx++] = outtxt_norm;
}
$('#parent').append(outarr.join(''));
outarr = [];

**snip**

**snip**
outtxt_norm=''；
输出=[]；
对于（idx=0，差值=288*totaldays；idx

总天数可以是1到30天。在30的情况下，.append（）调用需要10秒以上的时间才能完成，我尝试使用一个表和div来创建它，没有时间上的差异。如果我删除样式，则可以在1秒内创建它们，但将样式应用于它们会崩溃

---

有没有更快的方法来创建动态宽度垂直线的背景？

我不确定您使用它的目的是什么。如果它是一种用于数据可视化的图形，那么SVG可能是一个不错的选择。检查一下这个

希望能有帮助

• 演示2:

服务器端

<?php
 header('Content-type: application/json');
 $array = array();
 for ($i = 0; $i <= 4000; $i++) {
        array_push( $array, array( rand(1,2) , ( rand(1,30) * 5 ) ) );
    }                           
   echo json_encode($array);
?>

$(function() {
    $.getJSON('points.php',function(data) {
        $.each(data,function(i, item) {
            $('#points-map').append('<div class="inner" style="width:' + data[i][0] + 'px;height:' + data[i][1] + 'px"></div>');
        });
    });
});

客户端

<?php
 header('Content-type: application/json');
 $array = array();
 for ($i = 0; $i <= 4000; $i++) {
        array_push( $array, array( rand(1,2) , ( rand(1,30) * 5 ) ) );
    }                           
   echo json_encode($array);
?>

$(function() {
    $.getJSON('points.php',function(data) {
        $.each(data,function(i, item) {
            $('#points-map').append('<div class="inner" style="width:' + data[i][0] + 'px;height:' + data[i][1] + 'px"></div>');
        });
    });
});

$（函数（）{
$.getJSON（'points.php'，函数（数据）{
$。每个（数据、功能（i、项）{
$（“#点地图”）。附加（“”）；
});
});
});

您是否尝试使用类而不是内联CSS？@Vincent如何设置类的高度和宽度？我不知道有什么方法可以做到这一点。你可以只做document.body.innerHTML++“.myclass{width:“+…+”；height:“+…+”}”。这和我现在做的一样慢。我需要它扩展到8600个div。您的示例仍然需要5秒钟才能完成。例如，嗯，用ajax调用完成，在作业服务器端完成，然后用js显示这又回到了我的主要问题，您的所有代码执行速度都非常快，只是最后一次调用.html（html），需要5秒钟，这就是我在ajax请求之后调用它将其添加到DOM中的原因：（我已经更新了一点代码，它的工作速度很快，直到4000/5000个条目，显然8600多个条目是非常庞大的列表，我想你应该在服务器端全部完成。