カラーブロックレポート効果の動的な表示を実現する HTML (サンプルコード)

<スタイル タイプ="text/css">
            *{
                パディング: 0;
                マージン: 0;
            }
            .tubiao、.jihua、.shiji、.riqi{
                幅: 100%;
                オーバーフロー: 非表示;
                上マージン: 10px;
            }
            。左{
                幅: 10%;
                フロート: 左;
                テキスト配置: 中央;
                高さ: 25px;
                行の高さ: 25px;
            }
            。右{
                幅: 90%;
                フロート: 右;
                高さ: 25px;
            }
            スパン {
                幅: 5%;
                高さ: 100%;
                テキスト配置: 中央;
                表示: インラインブロック;
            }
        </スタイル>

<本文>
        <div class="tubiao">
            <div class="jihua">
                <div class="left">計画</div>
                <!--計画スパンを保存する場所-->
                <div class="右プラン"></div>
            </div>
            <div class="shiji">
                <div class="left">実際</div>
                <!--実際のスパンが格納される場所-->
                <div class="正しい行為"></div>
            </div>
            <div class="riqi" id="day_id">
                <!--日付が保存される場所-->
                <div class="正しい日"></div>
            </div>
        </div>
        <script type="text/javascript">
            var temp1="0-0.5-2-2-2-2-1-1"; // 計画時間（ブロックの単位幅）
            var temp2="1-1-2-1-2-0-0-0"; //実際の消費時間（ブロックの単位幅）            
            var temp3="5/19-5/20-5/21-5/22-5/23-5/24-5/25-5/26-5/27-5/28";//包括的な日付var temp=temp1+"~"+temp2+"~"+temp3;                
            var plan = document.getElementsByClassName("plan")[0];
            var act = document.getElementsByClassName("act")[0];
            var day = document.getElementsByClassName("day")[0];
            var num = 20; // 作成するグリッドの数 load_first(temp);
            //データを分割してカラーブロックを追加する function load_first(temp){
                var demo = temp.split("~");
                var d1=demo[0].split("-");//予定時間（ブロックの幅単位）配列var d2=demo[1].split("-");///実際の時間（ブロックの幅単位）配列var d3=demo[2].split("-");//総合日付配列for(var i=0;i<d3.length;i++){
                    時間範囲(d3[i]);
                }
                //アラート("6:"+d1.length+"---"+"3:"+d2.length);
                //アラート("d3.length:"+d3.length);
                (var i=0;i<d1.length;i++){                
                    d1[i],d2[i],i を add_span します。
                }
                document.getElementById("day_id").style.marginLeft="-30px"; 
            }            
            //新しいカラーブロックを追加します。aは計画されたカラーブロックの幅、bは実際のカラーブロックの幅です。function add_span(a,b,i){
                //span ブロックを作成する var span1 = document.createElement("span");
                var span2 = document.createElement("span");
                //ランダムな背景色を定義する var spa = "rgba(" + rnd(0,255)+ "," + rnd(0,255)+ ","+ rnd(0,255)+ ","+ rnd(0.5,1) +")"; //各色はランダムに出てくる if(i==0){
                    span1.style.backgroundColor = "000000";
                    //clientWidth はオブジェクトの幅です（境界線を除く）
                    span1.style.width = (plan.clientWidth/num*a) + "px"; // プラン内の各グリッドの幅 // プランにノード span1 を挿入
                    プラン。
                    span2.style.backgroundColor = "000000";
                    span2.style.width = (plan.clientWidth/num*b) + "px"; //各グリッドの実際の幅 act.appendChild(span2);
                }それ以外{
                    //アラート("a:"+a+"b:"+b+"i:"+i);
                    if(a=="0"){
                        span1.style.backgroundColor = "000000";    
                        span1.style.width = (plan.clientWidth/num*a) + "px"; // プラン内の各グリッドの幅 // プランにノード span1 を挿入
                        プラン。
                    }それ以外{
                        span1.style.backgroundColor を設定します。
                        //clientWidth はオブジェクトの幅です（境界線を除く）
                        span1.style.width = (plan.clientWidth/num*a) + "px"; // プラン内の各グリッドの幅 // プランにノード span1 を挿入
                        プラン。
                    }
                    if(b=="0"){
                        span2.style.backgroundColor = "000000";
                        span2.style.width = (plan.clientWidth/num*b) + "px"; //各グリッドの実際の幅 act.appendChild(span2);                    
                    }それ以外{
                        span2.style.backgroundColor を設定します。
                        span2.style.width = (plan.clientWidth/num*b) + "px"; //各グリッドの実際の幅 act.appendChild(span2);
                    }                
                }
            }            
            //日付データ挿入関数 time_span(time){
                //span ブロックを作成します var span = document.createElement("span");                
                span.style.width = (plan.clientWidth/num*1) + "px"; //各スパンの幅 span.innerHTML = "" + time;
                day.appendChild(span);
            }
            //ランダム関数 function rnd(min,max){
                Math.round(Math.random()*(max - min)+min) を返します。                
            }
            関数QueryData() {
                var 表示スタイル = "1";
                $.ajax({
                    タイプ: "投稿",
                    URL: "Test.aspx",
                    データ型: "テキスト",
                    データ: { "表示スタイル": displayStyle },
                    エラー: 関数 (XMLHttpRequest、textStatus、errorThrown) {
                        アラート(エラースロー + XMLHttpRequest.responseText);
                    },
                    成功: 関数 (json) {
                        試す {
                            最初にjsonをロードします。
                        }
                        キャッチ（e）{}
                    }
                });
            }
            //クエリデータ();
        </スクリプト>
    </本文>