这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0513/334182.html