HTML realisiert den Berichtseffekt der dynamischen Anzeige von Farbblöcken-HTML-Tutorial-php.cn

HTML realisiert den Berichtseffekt der dynamischen Anzeige von Farbblöcken

巴扎黑

Freigeben： 2017-05-14 13:53:33

Original

1429 Leute haben es durchsucht

In diesem Artikel wird erklärt, wie man HTML-Farbblöcke verwendet, um Daten anhand eines Beispielcodes anzuzeigen. Der Code ist einfach und leicht zu verstehen.

Mit HTML Farbblöcke zur dynamischen Anzeige von Daten

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonHTML realisiert den Berichtseffekt der dynamischen Anzeige von Farbblöcken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!