html中加颜色块,结合css用Html 实现动态显示颜色块的报表效果

本文将结合css来通过实例代码讲解，如何使用html的颜色块动态展示数据功能，非常不错，代码简单易懂，需要的朋友参考下，希望能帮助到大家。

利用html的颜色块动态展示数据

*{

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%;

float: right;

height: 25px;

}

span {

width: 5%;

height: 100%;

text-align: center;

display: inline-block;

}

计划

实际

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

time_span(d3[i]);

}

//alert("6:"+d1.length+"---"+"3:"+d2.length);

//alert("d3.length:"+d3.length);

for(var i=0;i

add_span(d1[i],d2[i],i);

}

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是对象看到的宽度(不含边线,即border)

span1.style.width = (plan.clientWidth/num*a) + "px";//计划的每一格的宽度

//插入节点span1至plan

plan.appendChild(span1);

span2.style.backgroundColor = "000000";

span2.style.width = (plan.clientWidth/num*b) + "px";//实际的每一格的宽度

act.appendChild(span2);

}else{

//alert("a:"+a+"b:"+b+"i:"+i);

if(a=="0"){

span1.style.backgroundColor = "000000";

span1.style.width = (plan.clientWidth/num*a) + "px";//计划的每一格的宽度

//插入节点span1至plan

plan.appendChild(span1);

}else{

span1.style.backgroundColor = spa;

//clientWidth是对象看到的宽度(不含边线,即border)

span1.style.width = (plan.clientWidth/num*a) + "px";//计划的每一格的宽度

//插入节点span1至plan

plan.appendChild(span1);

}

if(b=="0"){

span2.style.backgroundColor = "000000";

span2.style.width = (plan.clientWidth/num*b) + "px";//实际的每一格的宽度

act.appendChild(span2);

}else{

span2.style.backgroundColor = spa;

span2.style.width = (plan.clientWidth/num*b) + "px";//实际的每一格的宽度

act.appendChild(span2);

}

}

}

//日期的数据插入

function time_span(time){

//创建span块

var span = document.createElement("span");

span.style.width = (plan.clientWidth/num*1) + "px";//每一个span的宽度

span.innerHTML = "" + time;

day.appendChild(span);

}

//随机函数

function rnd(min,max){

return Math.round(Math.random()*(max - min)+min);

}

function QueryData() {

var displayStyle = "1";

$.ajax({

type: "post",

url: "Test.aspx",

dataType: "text",

data: { "DispalyStyle": displayStyle },

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(errorThrown + XMLHttpRequest.responseText);

},

success: function (json) {

try {

load_first(json);

}

catch (e) { }

}

});

}

//QueryData();

大家学会了吗？赶紧动手自己尝试一下吧。

相关推荐：