Outlook 日历时间块布局 html5实现
将左边的数据排列成右边的整齐和密集的数据。
<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 = [, , , , , , , , , , , , ];
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 != -1) index = data;
cxt.fillStyle = grd;
cxt.strokeRect(bar * index, data, bar, data - data);
cxt.fillRect(bar * index + 1, data + 1, bar - 2, data - data - 2);
cxt.fillStyle = "#FF0000";
cxt.fillText(data+","+data,bar * index + bar/2-10, data+(data-data)/2);
}
}
//已经排序好的数据
function splitdata(data) {
function numberorder(a, b) {
return a - b;
}
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) {
curmax = data;
}
if (curmax <= data) {
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;
function numberorder(a, b) {
return a - b;
}
data.sort(numberorder);
draw("CanvasOri", data, 200, -1);
var k = 0;
var len = data.length;
for (var i = 0; i < len; i++) {
if (data != -1) continue;
data = k;
var curmax = data;
for (var j = i + 1; j < len; j++) {
if (curmax <= data && data == -1) {
data = k;
curmax = data;
}
}
k++;
}
draw("Canvas1", data, 200, k);
document.write("<br>--------------------<br>")
for (var i = 0; i < len; i++) {
document.write("<br>" + data + " " + data + " " + data + "<br>");
}
}
</script>
</body>
</html>
页:
[1]