利用html的颜色块动态展示数据

最新推荐文章于 2023-04-20 15:16:52 发布

云南仟龙Mark

最新推荐文章于 2023-04-20 15:16:52 发布

阅读量479

点赞数

文章标签：音视频 html css3

原文链接：https://blog.51cto.com/u_15111999/4373161

版权

今天分享下”利用html的颜色块动态展示数据“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

利用html的颜色块动态展示数据

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>

</div>

</div>

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”;//实际的每一格的宽度：http://www.qlyl1688.com/products/ycxsyd.html

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();

</body>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用html的颜色块动态展示数据

今天分享下”利用html的颜色块动态展示数据“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。利用html的颜色块动态展示数据<style type="text/css">*{padding: 0;margin: 0;}.tubiao,.jihua,.shiji,.riqi{width: 100%;
复制链接

扫一扫