Use HTML color block to dynamically display data
<STYLE TYPE = Text/CSS> *{padding: 0; margin: 0;} .tubiao,. Jihua, .shiji, .riqi {width: 100%; overflow: hidden; margin-top: 10px;} .left {{ width: 10%; float: left; text-align: center; height: 25px; line-height: 25px;} .right {width: 90%; foot: right: 25px;} span {wid {wid {wid TH: 5%; height: 100%; text-align: center; display: inline-black;} </style> <body> <div class = tubiao> <div class = jihua> <div class = left> Plan </div> <!-The place where the plan is stored-> <div class = right Plan> </div> </div> < /div> <div class = shiji> <div class = left> Actual </div> <!-The actual SPAN stored place-> <div class = right Act> </div> </div> <div class> = Riqi ID = Day_id> <!-Where the date store-> <div class = right day> </div> </div> </div> <script type = text/javascript> var Temp1 = 0-0.5 -2-2-2-2-1-1; // Plan time time (unit width) VAR TEMP2 = 1-1-2-1-2-0-0-0; Units width) VAR TEMP3 = 5/19-5/20-5/21-5/22-5/23-5/24-5/25/26-5/27-5/28; // Comprehensive Date var Temp = TEMP1+~+Temp2+~+Temp3; VAR Plan = Document.GetelementsByClassName (Plan) [0]; Var Act = Document.GetelementsByClassName (Act) [0) [0) ];; Document.GetelementsByClassName (Day) [0] ; Var Num = 20; // How many grids of Load_Firs (TEMP); // Segment data and add color block operation function load_first (temp) {var demo = temp.split (~); var d1 = demo [0]. split (-); // The time-consuming plan (block width) array VAR D2 = Demo [1] .split (-); //// actual time-consuming (block width) array VAR D3 = Demo [2 ] .split (-); // Comprehensive date array for (var I = 0; I <d3.length; i ++) {time_span (d3 [i]);} //alert (6:+d1.length+ ----------------- +3:+d2.length); //alert (d3.length:+d3.length); for (var I = 0; I <d1.length; i ++) {add_span (d1 [i], d2 [i] , i);} Document.GetelementByid (day_id) .style.marginleft = -30px;} // Add color blocks, A is the width of the plan color block, B is the actual color block width 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)+); // Each color comes out if (i == 0) {span1.style.backgroundcolor = 000000; // ClientWidth is the width of the object (the width of the object ( Without the edge line, that is, border) span1.style.width = (Plan.clientWidth/NUM*A) + PX; // The width of each grid of the plan // insert node span1 to Plan Plan.appendchild (span1); span2. STYLE.BackgroundColor = 000000; span2.style.width = (Plan.clientWidth/NUM*B) + PX; // The width of each grid of each grid att.appndchild (span2);} Else {// ALERT (a: + A+B:+B+I:+I); if (a == 0) {span1.style.backgroundColor = 000000; span1.style.width = (plan.clientWidth/num*A)+PX; // Plan The width of each grid // Insert node span1 to Plan Plan.appendchild (span1);} else {span1.style.backgroundcolor = spa; // clientWidth is the width of the object (excluding border, Border) span1. STYLE.Width = (Plan.clientWidth/NUM*A) + PX; // The width of each grid of the plan // Insert node span1 to Plan Plan.appendchild (span1);} if (b == 0) {span2. STYLE.BackgroundColor = 000000; span2.style.width = (Plan.clientWidth/NUM*B) + PX; // The width of each grid is act.appendchild (span2);} Else {span2.style. backgroundColor = spa ; span2.style.width = (Plan.clientWidth/num*b) + px; // The width of each grid of each grid att.appndchild (span2);}} // Date inserts the function time_span (time) { // Create span block var span = document.createElement (span); span.style.width = (Plan.clientWidth/NUM*1) + PX; // The width of each span span.innerhtml; day.app endChild (span);} // The random function function rnd (min, max) {return math.round (math.random ()*(max -min)+min); ajax ({type: post, url: test.aspx, dattype: text, data: {dispalyStyle: displaystyle}, error: function (xmlhttprequest, textstatus, errorThrown) {ALERERERERERERERERERERERERER t (Errthrown + xmlhttprequest.Responsetext);}, Success: Function (json) {try {load_first (json);} catch (e) {}}});} // querydata (); </script> </body>The above is the report effect (instance code) that the HTML realizes the dynamic display of the color block that the editor introduces it to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!