纯前端绘制精美时间轴-Timesheet.js
纯前端绘制精美时间轴-Timesheet.js
周星星9527
发布于 2022-05-16 21:07:53
发布于 2022-05-16 21:07:53
项目地址：
https://github.com/sbstjn/timesheet.js效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>Timesheet.js - Open time tables with HTML, JavaScript and CSS …</title>
<script src="dist/timesheet.js" type="text/javascript"></script>
<link href="dist/timesheet.css" rel="stylesheet" type="text/css" />
</head>
<body class='index'>
<div id='container'>
<div id='box'>
<div id='box-inner'>
<h1>
Timesheet<span>.js</span>
</h1>
<p>Visualize your data and events with sexy <span>HTML5</span> and <span>CSS3</span>. Create simple time sheets
with sneaky JavaScript. Style them with CSS and have mobile fun as well …</p>
<div id='timesheet-default'></div>
<p>Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course
no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS
to be customized by mighty you.</p>
<code><pre><script src="/javascripts/timesheet.js" type="text/javascript" /></pre></code>
<p>Create a simple time sheet based on a JS array of events:</p>
<code><pre>new Timesheet('timesheet', 2002, 2013, [
 ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
 ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
 ['2003', 'Had very bad luck'],
 ['10/2003', '2006', 'At least had fun', 'dolor'],
 ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
 ['07/2005', '09/2005', 'Bad luck again', 'default'],
 ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
 ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
 ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
 ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
 ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);</pre></code>
<p>It's that simple to use <span>Timesheet.js</span>. So, have a nice day, thank you for smoking and maybe try
using Timesheet.js with custom styles. Inspired by Ilya …</p>
</div>
</div>
</div>
</body>
</html>
<script>
(function () {
'use strict';
var Lib = {
/* http://www.dustindiaz.com/smallest-domready-ever */
/* jshint -W030 */
ready: function r(f) { /in/.test(document.readyState) ? setTimeout(function () { Lib.ready(f); }, 9) : f(); }
};
window.Lib = Lib;
})();
(function () {
'use strict';
/**
* Initialize a Timesheet
*/
var Timesheet = function (container, min, max, data) {
this.data = [];
this.year = {
min: min,
max: max
};
this.parse(data || []);
if (typeof document !== 'undefined') {
this.container = (typeof container === 'string') ? document.querySelector('#' + container) : container;
this.drawSections();
this.insertData();
}
};
/**
* Insert data into Timesheet
*/
Timesheet.prototype.insertData = function () {
var html = [];
var widthMonth = this.container.querySelector('.scale section').offsetWidth;
for (var n = 0, m = this.data.length; n < m; n++) {
var cur = this.data[n];
var bubble = this.createBubble(widthMonth, this.year.min, cur.start, cur.end);
var line = [
'<span style="margin-left: ' + bubble.getStartOffset() + 'px; width: ' + bubble.getWidth() + 'px;" class="bubble bubble-' + (cur.type || 'default') + '" data-duration="' + (cur.end ? Math.round((cur.end - cur.start) / 1000 / 60 / 60 / 24 / 39) : '') + '"></span>',
'<span class="date">' + bubble.getDateLabel() + '</span> ',
'<span class="label">' + cur.label + '</span>'
].join('');
html.push('<li>' + line + '</li>');
}
this.container.innerHTML += '<ul class="data">' + html.join('') + '</ul>';
};
/**
* Draw section labels
*/
Timesheet.prototype.drawSections = function () {
var html = [];
for (var c = this.year.min; c <= this.year.max; c++) {
html.push('<section>' + c + '</section>');
}
this.container.className = 'timesheet color-scheme-default';
this.container.innerHTML = '<div class="scale">' + html.join('') + '</div>';
};
/**
* Parse data string
*/
Timesheet.prototype.parseDate = function (date) {
if (date.indexOf('/') === -1) {
date = new Date(parseInt(date, 10), 0, 1);
date.hasMonth = false;
} else {
date = date.split('/');
date = new Date(parseInt(date[1], 10), parseInt(date[0], 10) - 1, 1);
date.hasMonth = true;
}
return date;
};
/**
* Parse passed data
*/
Timesheet.prototype.parse = function (data) {
for (var n = 0, m = data.length; n < m; n++) {
var beg = this.parseDate(data[n][0]);
var end = data[n].length === 4 ? this.parseDate(data[n][1]) : null;
var lbl = data[n].length === 4 ? data[n][2] : data[n][1];
var cat = data[n].length === 4 ? data[n][3] : data[n].length === 3 ? data[n][2] : 'default';
if (beg.getFullYear() < this.year.min) {
this.year.min = beg.getFullYear();
}
if (end && end.getFullYear() > this.year.max) {
this.year.max = end.getFullYear();
} else if (beg.getFullYear() > this.year.max) {
this.year.max = beg.getFullYear();
}
this.data.push({ start: beg, end: end, label: lbl, type: cat });
}
};
/**
* Wrapper for adding bubbles
*/
Timesheet.prototype.createBubble = function (wMonth, min, start, end) {
return new Bubble(wMonth, min, start, end);
};
/**
* Timesheet Bubble
*/
var Bubble = function (wMonth, min, start, end) {
this.min = min;
this.start = start;
this.end = end;
this.widthMonth = wMonth;
};
/**
* Format month number
*/
Bubble.prototype.formatMonth = function (num) {
num = parseInt(num, 10);
return num >= 10 ? num : '0' + num;
};
/**
* Calculate starting offset for bubble
*/
Bubble.prototype.getStartOffset = function () {
return (this.widthMonth / 12) * (12 * (this.start.getFullYear() - this.min) + this.start.getMonth());
};
/**
* Get count of full years from start to end
*/
Bubble.prototype.getFullYears = function () {
return ((this.end && this.end.getFullYear()) || this.start.getFullYear()) - this.start.getFullYear();
};
/**
* Get count of all months in Timesheet Bubble
*/
Bubble.prototype.getMonths = function () {
var fullYears = this.getFullYears();
var months = 0;
if (!this.end) {
months += !this.start.hasMonth ? 12 : 1;
} else {
if (!this.end.hasMonth) {
months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
months += 12 * (fullYears - 1 > 0 ? fullYears - 1 : 0);
} else {
months += this.end.getMonth() + 1;
months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
months += 12 * (fullYears - 1);
}
}
return months;
};
/**
* Get bubble's width in pixel
*/
Bubble.prototype.getWidth = function () {
return (this.widthMonth / 12) * this.getMonths();
};
/**
* Get the bubble's label
*/
Bubble.prototype.getDateLabel = function () {
return [
(this.start.hasMonth ? this.formatMonth(this.start.getMonth() + 1) + '/' : '') + this.start.getFullYear(),
(this.end ? '-' + ((this.end.hasMonth ? this.formatMonth(this.end.getMonth() + 1) + '/' : '') + this.end.getFullYear()) : '')
].join('');
};
window.Timesheet = Timesheet;
})();
/* global Lib, Timesheet */
(function () {
'use strict';
Lib.ready(function () {
console.log('ads');
/* jshint -W031 */
new Timesheet('timesheet-default', 2002, 2013, [
['2002', '09/2002', 'A freaking awesome time', 'lorem'],
['06/2002', '09/2003', 'Some great memories', 'ipsum'],
['2003', 'Had very bad luck'],
['10/2003', '2006', 'At least had fun', 'dolor'],
['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
['07/2005', '09/2005', 'Bad luck again', 'default'],
['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
['01/2009', '05/2009', 'LOST Season #4', 'sit'],
['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);
document.querySelector('#switch-dark').addEventListener('click', function () {
document.querySelector('body').className = 'index black';
});
document.querySelector('#switch-light').addEventListener('click', function () {
document.querySelector('body').className = 'index white';
});
});
})();
</script>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-04-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读