利用html的颜色块动态展示数据
<styletype="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%;
float:right;
height:25px;
}
span{
width:5%;
height:100%;
text-align:center;
display:inline-block;
}
</style>
<body>
<pclass="tubiao">
<pclass="jihua">
<pclass="left">计划</p>
<!--计划span存放的地方-->
<pclass="rightplan"></p>
</p>
<pclass="shiji">
<pclass="left">实际</p>
<!--实际span存放的地方-->
<pclass="rightact"></p>
</p>
<pclass="riqi"id="day_id">
<!--日期存放的地方-->
<pclass="rightday"></p>
</p>
</p>
<scripttype="text/javascript">
vartemp1="0-0.5-2-2-2-2-1-1";//计划耗时（块的单位宽度）
vartemp2="1-1-2-1-2-0-0-0";//实际耗时（块的单位宽度）
vartemp3="5/19-5/20-5/21-5/22-5/23-5/24-5/25-5/26-5/27-5/28";//综合日期
vartemp=temp1+"~"+temp2+"~"+temp3;
varplan=document.getElementsByClassName("plan")[0];
varact=document.getElementsByClassName("act")[0];
varday=document.getElementsByClassName("day")[0];
varnum=20;//创建多少个格
load_first(temp);
//分割数据和添加色块操作
functionload_first(temp){
vardemo=temp.split("~");
vard1=demo[0].split("-");//计划耗时（块的单位宽度）数组
vard2=demo[1].split("-");////实际耗时（块的单位宽度）数组
vard3=demo[2].split("-");//综合日期数组
for(vari=0;i<d3.length;i++){
time_span(d3[i]);
}
//alert("6:"+d1.length+"---"+"3:"+d2.length);
//alert("d3.length:"+d3.length);
for(vari=0;i<d1.length;i++){
add_span(d1[i],d2[i],i);
}
document.getElementById("day_id").style.marginLeft="-30px";
}
//新增颜色块,a为计划颜色块宽度，b为实际颜色块宽度
functionadd_span(a,b,i){
//创建span块
varspan1=document.createElement("span");
varspan2=document.createElement("span");
//定义随机底色
varspa="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);
}
}
}
//日期的数据插入
functiontime_span(time){
//创建span块
varspan=document.createElement("span");
span.style.width=(plan.clientWidth/num*1)+"px";//每一个span的宽度
span.innerHTML=""+time;
day.appendChild(span);
}
//随机函数
functionrnd(min,max){
returnMath.round(Math.random()*(max-min)+min);
}
functionQueryData(){
vardisplayStyle="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();
</script>
</body>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h55000.shtml
