HTML实现颜色块动态显示的报告效果(示例代码)

HTML实现颜色块动态显示的报告效果(示例代码)
使用HTML颜色块动态显示数据
* {
填充:0;
保证金:0;
}
。tubiao,。Jihua。Shiji。Riqi {
宽度:100%;
溢出:隐藏;
边距:10px;
}
左{。
宽度:10%;
浮点数:左;
文本对齐:中心;
身高:25px;
行高:25px;
}
右{。
宽度:90%;
浮子:右边;
身高:25px;
}
{跨度
宽度:5%;
身高:100%;
文本对齐:中心;
显示:内联块;
}

计划

实际

无功temp1 =0-0.5-2-2-2-2-1-1 ; / /计划时间(块单元宽度)
VaR temp2 =1-1-2-1-2-0-0-0 ; / /实际时间(块单元宽度)
VaR来看= 5 / / / 5·21-5 / / / 22 23-5 24-5 / / / 25-5 26-5 27-5 / 28 / /综合日期;
VaR的温度= temp1 +~+~ temp2 ++来看;
无功规划= document.getelementsbyclassname(计划){ 0 };
VaR法= document.getelementsbyclassname(法案){ 0 };
VaR天= document.getelementsbyclassname(天){ 0 };
var = 20;创建多个格
load_first(临时);
/分割数据和添加颜色操作
功能load_first(临时){
VaR演示= temp.split(~ );
var = demo { 0 }。
var =演示程序{ 1 }( ));实际时间(块单元宽度)数组。
0 =演示{ 2 }。
对于(var i = 0;i < d3.length;i++){
time_span(D3 {我});
}
警报()6+长度3;
警报();
对于(var i = 0;i < d1.length;i++){
add_span(D1 {我},D2 {我},我);
}
document.getelementbyid(day_id)。风格。marginleft = 30px ;
}
添加颜色块、平面颜色块宽度、实际颜色的B宽度。
功能add_span(A,B,I){
创建一个跨块
无功span1 = document.createelement(跨越);
无功span2 = document.createelement(跨越);
随机背景的定义
VaR SPA = RGBA(RND(0255)+ +
如果(i = 0){
span1.style.backgroundcolor =000000;
/ / clientwidth是宽度的物体(没有边界,即边界)
span1.style.width =(计划。clientwidth /民*)+PX; / /每个小区规划宽度
span1 / /插入节点计划
plan.appendchild(span1);
span2.style.backgroundcolor =000000;
span2.style.width =(计划。clientwidth /民* B)+PX; / /每个细胞的实际宽度
act.appendchild(span2);
其他{ }
警报()+;
如果(a = 0 ){
span1.style.backgroundcolor =000000;
span1.style.width =(计划。clientwidth /民*)+PX; / /每个小区规划宽度
span1 / /插入节点计划
plan.appendchild(span1);
其他{ }
span1.style.backgroundcolor =温泉;
/ / clientwidth是宽度的物体(没有边界,即边界)
span1.style.width =(计划。clientwidth /民*)+PX; / /每个小区规划宽度
span1 / /插入节点计划
plan.appendchild(span1);
}
如果(b = 0 ){
span2.style.backgroundcolor =000000;
span2.style.width =(计划。clientwidth /民* B)+PX; / /每个细胞的实际宽度
act.appendchild(span2);
其他{ }
span2.style.backgroundcolor =温泉;
span2.style.width =(计划。clientwidth /民* B)+PX; / /每个细胞的实际宽度
act.appendchild(span2);
}
}
}
数据插入日期
功能time_span(时间){
创建一个跨块
VaR跨度= document.createelement(跨);
span.style.width =(计划。clientwidth /数×1)+PX; / /每跨宽
span.innerhtml = +时间;
day.appendchild(跨度);
}
随机函数
函数RND(min,max){
返回math.round(Math.random()*(最大值-最小)+分钟);
}
函数的QueryData(){
VaR displaystyle =1;
$ ajax({
类型:邮政
网址:测试。aspx
DataType:文本
数据:{dispalystyle :displaystyle },
错误:函数(XMLHttpRequest,textstatus,errorthrown){
警报(errorthrown + XMLHttpRequest。responseText);
},
成功:函数(JSON){
{试
load_first(JSON);
}
catch(e){ }
}
});
}
/ /查询();

上面是一个小的HTML演示,可以动态显示颜色块报告(示例代码)。我们希望能帮助你。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站。

tag:动态显示示例代码报告颜色效果

相关内容