利用超文本标记语言的颜色块动态展示数据

styletype='text/css '

*{

padding:0

边距n:0

}。土条。吉华，《史记日奇{

宽度：;

飞越：隐藏；

margin-top :10 px；

}。左{

宽度：10%;

float:left

文本对齐：中心；

高度：25px

线高：25 px

}。右{

宽度：90%;

右侧浮动：

高度：25px

}

span{

宽度：5%;

高度：;

文本对齐：中心；

显示：内嵌块；

}

/style

身体

pclass='tubiao '

pclass='jihua '

pclass='left '计划/p

！-计划跨度存放的地方-

pclass='rightplan'/p

/p

pclass='shiji '

pclass='left '实际/p

！-实际跨度存放的地方-

pclass='rightact'/p

/p

pclass='riqi'id='day_id '

！-日期存放的地方-

pclass='rightday'/p

/p

/p

scripttype='text/javascript '

var temp 1=' 0-0.5-2-2-2-2-1-1 '；//计划耗时（块的单位宽度)

var temp 2=' 1-1-2-1-2-0-0-0 '；//实际耗时（块的单位宽度)

var temp 3=' 5/19-5/20-5/21-5/22-5/23-5/24-5/25-5/26-5/27-5/28 '；//综合日期

var temp=temp 1 ' ~ ' temp 2 ' ~ ' temp 3；

var plan=文档。GetElementsByclassname(' plan ')[0]；

var act=文档。GetElementsByclassName(' act ')[0]；

var day=document。GetElementsByclassname(' day ')[0]；

varnum=20//创建多少个格

load _ first(temp)；

//分割数据和添加色块操作

functionload_first(temp){

var demo=temp。拆分(' ~ ')；

vard1=demo[0].split('-')；//计划耗时（块的单位宽度)数组

vard2=demo[1].split('-')；////实际耗时（块的单位宽度)数组

vard3=demo[2].split('-')；//综合日期数组

for(vari=0；id3.lengthi ){

time _ span(D3[I])；

}

//alert(' 6: ' D1。长度'-' 3: ' D2。长度)；

//alert(' D3。长度： ' D3。长度)；

for(vari=0；id1.lengthi ){

add_span(d1[i]，d2[i]，I)；

}

文件。GetElementBYid(' day _ id ')。风格。左边距='-30px '；

}

//新增颜色块，a为计划颜色块宽度，b为实际颜色块宽度

functionadd_span(a，b，i){

//创建跨度块

var span 1=文档。createElement(' span ')；

var span 2=文档。createElement(' span ')；

//定义随机底色

varspa='rgba(' rnd(0，255)'，' rnd(0，255)'，' rnd(0，255)'，' rnd(0.5，1)')'；//每一个颜色随机出来

if(i==0){

跨度1。风格。背景颜色=' 000000 '；

//clientWidth是对象看到的宽度（不含边线，即边框)

跨度1。风格。width=(平面图。客户端宽度/num * a)' px '；//计划的每一格的宽度

//插入节点span1至计划

计划。append child(span 1)；

跨度2。风格。背景颜色=' 000000 '；

跨度2。风格。width=(平面图。客户端宽度/num * b)' px '；//实际的每一格的宽度

行动。append child(span 2)；

}else{

//alert(' a : ' a ' b : ' b ' I : ' I)；

if(a=='0'){

跨度1。风格。背景颜色=' 000000 '；

跨度1。风格。width=(平面图。客户端宽度/num * a)' px '；//计划的每一格的宽度

//插入节点span1至计划

计划。append child(span 1)；

}else{

跨度1。风格。背景COlOr=spa

//clientWidth是对象看到的宽度（不含边线，即边框)

跨度1。风格。width=(平面图。客户端宽度/num * a)' px '；//计划的每一格的宽度

//插入节点span1至计划

计划。append child(span 1)；

}

if(b=='0'){

跨度2。风格。背景颜色=' 000000 '；

跨度2。风格。width=(平面图。客户端宽度/num * b)' px '；//实际的每一格的宽度

行动。append child(span 2)；

}else{

跨度2。风格。背景COlOr=spa

跨度2。风格。width=(平面图。客户端宽度/num * b)' px '；//实际的每一格的宽度

行动。append child(span 2)；

}

}

}

//日期的数据插入

functiontime_span(time){

//创建跨度块

var span=文档。createElement(' span ')；

跨度。风格。width=(平面图。客户端宽度/num * 1)' px '；//每一个跨度的宽度

span.innerHTML=' '时间

。append child(span)；

}

//随机函数

functionrnd(最小值，更大值){

returnMath。圆(数学。random()*(max-min)min)；

}

functionQueryData(){

vardisplayStyle=' 1

$.ajax({

type:'post '，

url:'Test.aspx '，

数据类型： '文本，

数据： { '显示样式' :显示样式}，

错误：函数(XMlhttprequest，textStatus，错误通过){

警报(通过XMlhttprequest出错。response text)；

},

success:function(json){

尝试{

load _ first(JSON)；

}

接住(e){}

}

});

}

//查询数据()；

/script

/body