Use Html combined with css to achieve the report effect of dynamically displaying color blocks-HTML Tutorial-php.cn

Use Html combined with css to achieve the report effect of dynamically displaying color blocks

小云云

Release： 2017-12-11 10:32:45

Original

2339 people have browsed it

This article will combine CSS to explain through example code how to use HTML color blocks to dynamically display data functions. It is very good. The code is simple and easy to understand. Friends who need it can refer to it. I hope it can help everyone.

Use html color blocks to dynamically display data

<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>

Copy after login

<body>
        <p class="tubiao">
            <p class="jihua">
                <p class="left">计划</p>
                <!--计划span存放的地方-->
                <p class="right plan"></p>
            </p>
            <p class="shiji">
                <p class="left">实际</p>
                <!--实际span存放的地方-->
                <p class="right act"></p>
            </p>
            <p class="riqi" id="day_id">
                <!--日期存放的地方-->
                <p class="right day"></p>
            </p>
        </p>
        <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>

Copy after login

Have you all learned it? Hurry up and try it yourself.

Related recommendations:

JavaScript canvas implements brush size, color, and eraser examples

How about the text font color of CSS Settings

Summary of color codes in CSS (collection)

The above is the detailed content of Use Html combined with css to achieve the report effect of dynamically displaying color blocks. For more information, please follow other related articles on the PHP Chinese website!