将左边的数据排列成右边的整齐和密集的数据。
<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] + " " + data[i][1] + " " + data[i][2] + "<br>");
}
}
</script>
</body>
分享到：
相关推荐
为了实现拖放功能，可以使用HTML5的`draggable`属性和`dragstart`、`dragover`、`drop`等事件。当用户开始拖动一个事件时，我们需要记录它的原始位置和时间信息；在拖动过程中，更新视觉反馈；最后，在用户释放鼠标...
Outlook是微软公司推出的一款电子邮件、日历、任务和联系人管理软件，其用户界面设计简洁高效，深受用户喜爱。"jsp的仿outlook的js菜单"是指使用JavaScript技术在JSP（JavaServer Pages）页面上实现类似Outlook的...
总的来说，仿照Outlook 2010界面的C#实现是一个涉及UI设计、控件布局、事件处理、设计模式等多个方面知识的综合项目。通过这个项目，开发者不仅可以提升C#编程技能，还能深入了解用户界面设计的原则和实践。
Outlook因其清晰的布局和高效的功能组织而备受赞誉，因此很多开发者尝试模仿其界面设计。本文将深入探讨如何使用C#编程语言创建一个仿Outlook的Windows窗体（Winform）界面。 首先，要创建一个仿Outlook的界面，...
"datetime_日历_时间_"这个标题暗示了我们讨论的主题围绕着如何在应用程序或网站中实现一个功能齐全且美观的日历时间组件。 首先，`datetime.js`文件很可能包含了一个JavaScript库，用于处理日期和时间的显示、计算...
通过分析这个HTML文件，我们可以学习到HTML和CSS如何结合起来创建一个静态的日历布局，以及可能使用JavaScript来增加交互性。不过，具体的实现细节需要查看这个HTML文件的内容才能得知。如果你能访问并分析这个文件...
MFC包含了一套控件和框架，能够帮助开发者轻松实现复杂的用户界面，包括Outlook风格的布局。 首先，我们需要了解Outlook风格界面的主要元素： 1. **主窗口**：通常包含多个选项卡或窗格，每个窗格对应一个功能区，...
日历控件通常包含一个可视化的日历布局，用户可以通过它来查看日期、选择日期或者设置特定日期的事件。在本主题中，我们将深入探讨日历控件的设计、功能、实现方式以及其在不同平台的应用。 1. 设计原则：日历控件...
在 Web 应用中，日历控件有多种实现方式，包括原生 HTML5 的 `<input type="date">`，JavaScript 库如 jQuery UI、FullCalendar，以及基于现代前端框架如 React、Vue 或 Angular 的第三方插件。这些控件通常支持以下...
Outlook是一款流行的电子邮件和日历管理工具，以其清晰的布局和高效的组织方式而闻名。在C#中，通过Windows Presentation Foundation (WPF) 或 Windows Forms 库可以实现这样的界面风格。 描述中的“具有OutLook...
在IT领域，日历插件是网页应用中常见的组件，特别是在任务管理、事件安排和时间规划等场景下。本文将详细解析一款基于Bootstrap和jQuery的日程日历插件，帮助开发者更好地理解和应用这类工具。 首先，Bootstrap是一...
《jQuery实现的日历特效源码解析与应用》 在网页开发中，日历插件是常见的一种交互元素，用于日期选择、事件提醒等场景。jQuery作为一款轻量级的JavaScript库，提供了丰富的API和插件支持，使得创建具有动态效果的...
例如，在Outlook中，用户可能希望在邮件列表和邮件阅读区域之间分配不同的空间，或者在日历和任务列表之间切换时调整它们的大小。 实现这样的功能通常涉及JavaScript、CSS和HTML等前端技术，或者在桌面应用中使用如...
在实际应用中，开发者可能还需要考虑日历的可访问性、多语言支持、时间区处理、与其他系统（如Google日历或Outlook）的同步等功能。同时，为了保证性能，应避免在大型数据集上使用过于复杂的动画，或者使用节流和...
Outlook的网页版界面设计是Microsoft Office Online的重要组成部分，提供了用户友好的邮件管理、日历、联系人和任务管理功能。这个"OutLook的网页版精美界面源码_修改版"压缩包文件很可能是为了帮助开发者或设计师...
4. **API集成**：Web日历可能与Google日历、Microsoft Outlook或其他第三方日历服务的API集成，使用户能够同步和管理他们在不同平台上的事件。 5. **数据库集成**：为了存储用户创建的事件和提醒，应用通常会连接到...
通过研究这些文件，开发者可以了解如何创建一个水平滚动的WeekCalendar，也可以根据自身需求对其进行定制和扩展，比如添加多语言支持、日期范围选择或者与其他API集成，如Google日历或Outlook。总的来说，实现这样的...
4. **同步功能**：现代日历程序通常支持与其他设备或服务（如Google日历、Outlook日历）同步，保持数据的一致性。 5. **共享与协作**：对于团队工作，日历程序可能允许用户共享他们的日程，以便团队成员能协调活动...
另外，日历控件也可以与第三方服务对接，如Google日历、Outlook等，实现跨平台的数据同步。 总之，日历控件在软件开发中扮演着重要角色，它不仅需要具备基本的日期选择功能，还要注重用户体验，提供美观、直观且...
1. **Outlook式界面**：这种界面设计通常指的是模仿Microsoft Outlook的布局和功能，包括邮件、日历、任务等模块。实现这种界面，开发者通常会使用MFC（Microsoft Foundation Classes）库，它是Visual C++的一个组成...