当前位置:首页 > 日记 > 正文

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演示,可以动态显示颜色块报告(示例代码)。我们希望能帮助你。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站。

相关文章

Windows7安装教程Oracle11g

Windows7安装教程Oracle11g

安装教程,电脑软件,Oracle11g,今天,下一个Oracle已经安装好了。比方说,我也了解了一些关于互联网的下一个step.ps,加上我自己的理解,我把所有的截图安装的详细过程,希望。 它可以帮助你顺利安装它。 然后解压 点击setup.exe 我使用了D盘的默认…

了解如何从PPT中去除不必要的视觉

了解如何从PPT中去除不必要的视觉

不必要,视觉效果,电脑软件,PPT,在传统的PPT制作,我们通常强调简洁的画面,直观的信息和清晰的关系图,但为了使元素在页面看起来乏味,他们经常添加一些颜色和效果来丰富页面,但他们恰恰相反。以下是小编给你带来了不必要的删除了视觉效果,希望对你…

WPS文本如何插入图表WPS文本教程

WPS文本如何插入图表WPS文本教程

文本,教程,图表,电脑软件,WPS,在WPS文本中,你经常画一些表格来帮助文字描述。如何在WPS文本中插入图表让我们告诉你萧边插入WPS图成图。 在WPS文本中插入图形的一种方法: 1,打开WPS文本,单击菜单栏——插入图表——在文本中生成一个自确定的…

原结合PS图象处理软件重点改进缺陷

原结合PS图象处理软件重点改进缺陷

缺陷,图象,处理软件,重点,电脑软件,眼睛是心灵的窗户。无论是肖像还是宠物,我们经常需要把眼睛的部分看得很清楚,相对来说,拍一些照片比较好,而拍起来要困难得多。当我们长时间自动按下快门时,我们无法以较慢的速度获得理想的动态。 在这种情况…

MySQL的列被修改为一行,并显示了数

MySQL的列被修改为一行,并显示了数

数据,修改,显示,简单实现,电脑软件,创建测试表: 如果存在测试下拉表; 创建表(测试) '年份' int(11)默认NULL, int(11)默认NULL, '金额'双默认NULL InnoDB引擎=默认的字符集utf8); 插入数据: 插入`测试`值('1991',‘1','1.1); 插入`测试`值('1991,2,'1.…

excel2007版中excel快速删除空白行

excel2007版中excel快速删除空白行

方法,删除,两种,版中,空白,在使用excel的过程中,数据修改和删除过程中通常会有许多空白。如何快速删除空白行今天,萧边教你两如何删除空白行快速在Excel 2007版。 一种快速删除excel 2007版空白行的方法 通过位置条件快速删除空白行 首先,…

如何使用Excel函数coupncdExcel功

如何使用Excel函数coupncdExcel功

函数,如何使用,功能,电脑软件,Excel,的coupncd功能是对函数的部分支付利息后的结算日期计算,如何在excel表格中使用此功能。 步骤:使用Excel coupncd功能 打开excel窗体,然后单击公式按钮,就像一个图形。 单击INSERT函数,如图表。 在弹出窗口…

为什么百度云会重复这个文件

为什么百度云会重复这个文件

文件,百度云,电脑软件,问:当我最近使用百度云磁盘时,我手动安装了客户端的最新版本。原来上传的ISO文件又上传了,上传了好几份。括号和数字自动添加到每个副本。 答:你可能不覆盖原来的客户当你安装百度云客户端,导致系统中的客户和新老两个版…

利用CSS3制作缩略图的详细过程

利用CSS3制作缩略图的详细过程

缩略图,过程,详细,电脑软件,我们使用边框属性创建缩略图,如下所示 xml代码将内容复制到剪贴板。 { IMG 边境:1px solid # DDD; 边界半径:4px; 填料:5px; } 缩略图 我们使用边框属性创建缩略图。 缩略图是如何连接的 xml代码将内容复制到剪贴板…

校园人格签名校园人格签名经典签名

校园人格签名校园人格签名经典签名

人格,校园,经典,电脑软件,难忘,美丽,短短的三年,校园里的每棵树和布什的一块石头,没有改变,什么句子都与校园有关。下面请欣赏小编为大家整理校园签名签名。 校园人格签名建议 1)每次我失望的时候,我几乎不爱你,直到最后的注改为全名,取消是特别的…

显示与可见性的区别

显示与可见性的区别

可见性,显示,区别,电脑软件,可见性隐藏对象还保留了对象显示所占用的物理空间,并且不保留显示。 vilibility:隐藏(隐藏),可见光(显示)style=vislbility:隐藏 显示:无(隐藏),块(显示)样式=显示:无 您可以保存以下代码以查看效果。 具体步骤: 代码示例: …

数组处理函数排序

数组处理函数排序

函数,排序,数组,电脑软件,在前面写: jQuery的数组处理函数被安排如下。如果有补充和建议,欢迎评论交流。 1美元,修剪(价值) 从值中删除任何前导或尾随空白字符 2美元,每一个(容器,回调(key,value)) 每个容器的项目都是迭代的,每个回调函数回调函数回调…