javascript实现动态显示颜色块的报表效果
利用html的颜色块动态展示数据
<style type="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>
<div class="tubiao">
<div class="jihua">
<div class="left">计划</div>
<!--计划span存放的地方-->
<div class="right plan"></div>
</div>
<div class="shiji">
<div class="left">实际</div>
<!--实际span存放的地方-->
<div class="right act"></div>
</div>
<div class="riqi" id="day_id">
<!--日期存放的地方-->
<div class="right day"></div>
</div>
</div>
<script type="text/javascript">
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<d3.length;i++){
time_span(d3[i]);
}
//alert("6:"+d1.length+"---"+"3:"+d2.length);
//alert("d3.length:"+d3.length);
for(var i=0;i<d1.length;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();
</script>
</body>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
javascript实现的颜色块滑动的动态效果
页页装载效果 #color div { width:5px; height:5px; float:left; margin:0 2px; } var v=document.getElementsByTagName('div'); var i=v.length-1; function chg_col(){ q=(i=v.length-1)?1:i+1 setTimeout("chg_col()",200) } chg_col() [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
javascript实现动态显示颜色块的报表效果
利用html的颜色块动态展示数据 <style type="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; } .ri
-
基于javascript实现随机颜色变化效果
本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{
-
JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align="center"> <table bgcolor=#F8F8F8 border="0" width=&q
-
jquery实现的随机多彩tag标签随机颜色和字号大小效果
jquery随机多彩tag标签随机颜色和字号大小效果 js代码: 复制代码 代码如下: <script type="text/javascript" src="jquery-1.6.4.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascrip
-
JS实现的DIV块来回滚动效果示例
本文实例讲述了JS实现的DIV块来回滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t
-
JavaScript实现多层颜色选项卡嵌套
本文实例为大家分享了JavaScript实现多层颜色选项卡嵌套的具体代码,供大家参考,具体内容如下 这是学JavaScript时候的一个作业,如果没有思路还是挺有难度的,但是思路正确的话一步一步来就很简单做出来了. 实现效果 HTML部分代码 <div class="box" id="box"> <ul id="leftBox"> <li class="active">a</li>
-
利用JavaScript模拟京东快递单号查询效果
1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
利用JavaScript实现仿QQ个人资料卡效果
目录 前言 思路 实现代码 HTML CSS 背景音乐 JavaScript 最终效果 前言 最近在学习前端的知识,无意间发现QQ 那个个人资料卡还挺好看的,就想着自己能不能照着原版搞出一个高仿出来,话不多时直接开始先睡上一觉,找找灵感,睡醒来又饿了,出去吃个饭,回来天tm都黑了,哈哈哈哈,金今天又是摆烂的一天,啊啊啊,不行至少今天这篇博客得写个前言部分…于是乎我们来到第二天,开始干(要干啥来着,幸亏昨天还写了个标题,要不然都忘了——HTML+CSS+JS实现仿QQ个人资料卡) 不多逼逼直接上干
-
JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style