HTML zur Erzielung einer dynamischen Anzeige des Farbblockberichtseffekts (Beispielcode)

<style type="text/css">
            *{
                Polsterung: 0;
                Rand: 0;
            }
            .tubiao,.jihua,.shiji,.riqi{
                Breite: 100 %;
                Überlauf: versteckt;
                Rand oben: 10px;
            }
            .links{
                Breite: 10%;
                schweben: links;
                Textausrichtung: zentriert;
                Höhe: 25px;
                Zeilenhöhe: 25px;
            }
            .Rechts{
                Breite: 90%;
                schweben: rechts;
                Höhe: 25px;
            }
            Spanne {
                Breite: 5%;
                Höhe: 100%;
                Textausrichtung: zentriert;
                Anzeige: Inline-Block;
            }
        </Stil>

<Text>
        <div Klasse="tubiao">
            <div Klasse="jihua">
                <div class="left">Planen</div>
                <!--Wo soll die geplante Zeitspanne gespeichert werden-->
                <div class="richtiger Plan"></div>
            </div>
            <div Klasse="shiji">
                <div class="left">Tatsächlich</div>
                <!--Wo der eigentliche Span gespeichert ist-->
                <div class="richtig handeln"></div>
            </div>
            <div Klasse="riqi" id="Tages-ID">
                <!--Wo das Datum gespeichert ist-->
                <div class="richtiger Tag"></div>
            </div>
        </div>
        <Skripttyp="text/javascript">
            var temp1="0-0.5-2-2-2-2-1-1"; //Geplante Zeit (Blockbreiteeinheit)
            var temp2="1-1-2-1-2-0-0-0"; //Tatsächlicher Zeitverbrauch (Blockbreiteeinheit)            
            var temp3="19.05.-20.05.-21.05.-22.05.-23.05.-24.05.-25.05.-26.05.-27.05.-28.05.";//umfassendes Datumvar temp=temp1+"~"+temp2+"~"+temp3;                
            var plan = document.getElementsByClassName("plan")[0];
            var act = document.getElementsByClassName("act")[0];
            var Tag = document.getElementsByClassName("Tag")[0];
            var num = 20; //Wie viele Gitter sollen erstellt werden? load_first(temp);
            //Daten aufteilen und Farbblöcke hinzufügen Funktion load_first(temp){
                var demo=temp.split("~");
                var d1=demo[0].split("-");//Geplante Zeit (Blockbreiteeinheit) arrayvar d2=demo[1].split("-");////Tatsächliche Zeit (Blockbreiteeinheit) arrayvar d3=demo[2].split("-");//Umfassendes Datum arrayfor(var i=0;i<d3.length;i++){
                    Zeitspanne(d3[i]);
                }
                //alarm("6:"+d1.length+"---"+"3:"+d2.length);
                //alarm("d3.length:"+d3.length);
                für(var i=0;i<d1.length;i++){                
                    add_span(d1[i],d2[i],i);
                }
                document.getElementById("day_id").style.marginLeft="-30px"; 
            }            
            //Füge einen neuen Farbblock hinzu, a ist die geplante Farbblockbreite, b ist die tatsächliche Farbblockbreite function add_span(a,b,i){
                //Span-Block erstellen var span1 = document.createElement("span");
                var span2 = document.createElement("span");
                //Zufällige Hintergrundfarbe definieren var spa = "rgba(" + rnd(0,255)+ "," + rnd(0,255)+ ","+ rnd(0,255)+ ","+ rnd(0.5,1) +")"; //Jede Farbe wird zufällig ausgegeben if(i==0){
                    span1.style.backgroundColor = "000000";
                    //clientWidth ist die Breite des Objekts (ohne Ränder)
                    span1.style.width = (plan.clientWidth/num*a) + "px"; //Die Breite jedes Rasters im Plan //Knoten span1 in Plan einfügen
                    plan.appendChild(span1);
                    span2.style.backgroundColor = "000000";
                    span2.style.width = (plan.clientWidth/num*b) + "px"; //Die tatsächliche Breite jedes Rasters act.appendChild(span2);
                }anders{
                    //alarm("a:"+a+"b:"+b+"i:"+i);
                    wenn(a=="0"){
                        span1.style.backgroundColor = "000000";    
                        span1.style.width = (plan.clientWidth/num*a) + "px"; //Die Breite jedes Rasters im Plan //Knoten span1 in Plan einfügen
                        plan.appendChild(span1);
                    }anders{
                        span1.style.backgroundColor = spa;
                        //clientWidth ist die Breite des Objekts (ohne Ränder)
                        span1.style.width = (plan.clientWidth/num*a) + "px"; //Die Breite jedes Rasters im Plan //Knoten span1 in Plan einfügen
                        plan.appendChild(span1);
                    }
                    wenn(b=="0"){
                        span2.style.backgroundColor = "000000";
                        span2.style.width = (plan.clientWidth/num*b) + "px"; //Die tatsächliche Breite jedes Rasters act.appendChild(span2);                    
                    }anders{
                        span2.style.backgroundColor = spa;
                        span2.style.width = (plan.clientWidth/num*b) + "px"; //Die tatsächliche Breite jedes Rasters act.appendChild(span2);
                    }                
                }
            }            
            //Datumsdaten-Einfügungsfunktion time_span(time){
                //Span-Block erstellen var span = document.createElement("span");                
                span.style.width = (plan.clientWidth/num*1) + "px"; //Die Breite jedes Spans span.innerHTML = "" + time;
                Tag.AnhängenKind(Spanne);
            }
            //Zufallsfunktion function rnd(min,max){
                gibt Math.round(Math.random()*(max - min)+min) zurück;                
            }
            Funktion QueryData() {
                var Anzeigestil = "1";
                $.ajax({
                    Typ: "Beitrag",
                    URL: "Test.aspx",
                    Datentyp: "Text",
                    Daten: { "Anzeigestil": Anzeigestil },
                    Fehler: Funktion (XMLHttpRequest, Textstatus, Fehler ausgelöst) {
                        Warnung (Fehler ausgelöst + XMLHttpRequest.Antworttext);
                    },
                    Erfolg: Funktion (json) {
                        versuchen {
                            Laden Sie zuerst (json);
                        }
                        fangen (e) { }
                    }
                });
            }
            //AbfrageDaten();
        </Skript>
    </body>