[ 登录注册 ]

HTML5

Outlook 日历时间块布局 html5实现

2016/08/17 14:09 [db:作者] 返回上一页

 \

将左边的数据排列成右边的整齐和密集的数据。
<html>
 
  <body>
    <canvas id="CanvasOri" width="200" height="200" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <canvas id="Canvas1" width="200" height="200" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">
    var alldata = [[0, 90, -1], [0, 30, -1], [39, 51, -1], [0, 30, -1], [30, 120, -1], [30, 60, -1], [60, 90, -1], [15, 40, -1], [50, 70, -1], [30, 61, -1], [130, 165, -1], [135, 175, -1], [175, 200, -1]];
      function draw(canvas, data, bar, group) {
        var c = document.getElementById(canvas);
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#BBD7AF";
        var grd = cxt.createLinearGradient(0, 0, 200, 200);
        grd.addColorStop(0, "#B9D6AD");
        grd.addColorStop(1, "#D8E7D1");
        cxt.lineWidth = 1;


        var len = data.length;
        if (group == -1) group = len;
        bar = bar / group
        for (var i = 0; i < len; i++) {
          var index = i;
          if (data[i][2] != -1) index = data[i][2];
          cxt.fillStyle = grd;
          cxt.strokeRect(bar * index, data[i][0], bar, data[i][1] - data[i][0]);
          cxt.fillRect(bar * index + 1, data[i][0] + 1, bar - 2, data[i][1] - data[i][0] - 2);
          cxt.fillStyle = "#FF0000";
          cxt.fillText(data[i][0]+","+data[i][1],bar * index + bar/2-10, data[i][0]+(data[i][1]-data[i][0])/2);
        }
      }
      //已经排序好的数据
      function splitdata(data) {
        function numberorder(a, b) {
          return a[0] - b[0];
        }
        data.sort(numberorder);
        var stack = [];
        var len = data.length;
        var s = 0;
        var curmax = 0;
        for (var i = 0; i < len - 1; i++) {
          if (curmax < data[i][1]) {
            curmax = data[i][1];
          }
          if (curmax <= data[i + 1][0]) {
            stack.push(data.slice(s, i + 1));
            s = i + 1;
          }
        }
        stack.push(data.slice(s, i + 1));
        return stack;
      }
      var alldata = splitdata(alldata);
      for (var m = 0; m < alldata.length; m++) {
        var data = alldata[m];


        function numberorder(a, b) {
          return a[0] - b[0];
        }
        data.sort(numberorder);
        draw("CanvasOri", data, 200, -1);


        var k = 0;
        var len = data.length;
        for (var i = 0; i < len; i++) {
          if (data[i][2] != -1) continue;
          data[i][2] = k;
          var curmax = data[i][1];
          for (var j = i + 1; j < len; j++) {
            if (curmax <= data[j][0] && data[j][2] == -1) {
              data[j][2] = k;
              curmax = data[j][1];
            }
          }
          k++;
        }
        draw("Canvas1", data, 200, k);
        document.write("<br>--------------------<br>")
        for (var i = 0; i < len; i++) {
          document.write("<br>" + data[i][0] + "&nbsp;" + data[i][1] + "&nbsp;" + data[i][2] + "<br>");
        }
      }
    </script>
  </body>


</html> 


摘自  miracle的专栏 
点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377667.html
评论
发表评论