diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..3c60f92
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/timeline.iml b/.idea/timeline.iml
new file mode 100644
index 0000000..0c8867d
--- /dev/null
+++ b/.idea/timeline.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/README.md b/README.md
index 619a1b5..6e0eb4b 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,25 @@
# timeline
-简易的jQuery时间轴插件
\ No newline at end of file
+jQuery简易时间轴展示，刻度可选时、分
+
+
+
+用法及参数如下：
+```javascript
+$('.timeline').timeline({
+ minScale: 'minute',//最小刻度：minute or hour
+ realtime: true,//是否实时刷新时间轴：true or false。为true时，若realtimeDate是当天，则时间轴上的时间进度随系统时间变化而变化
+ limit: true,//是否限制可拖动刻度范围：true or false。为true时，只能在当天开始到realtimeDate范围内拖动
+ date: new Date(),//时间轴时间，会自动取当天的0点到第二天的0作为时间轴刻度
+ startHour: '00',//开始小时。从第几时开始
+ endHour: '00',//结束小时。到第几时结束
+ realtimeDate: new Date(),//实时时间，限制拖动范围开启后，只能在当天0点到这个时间段之间拖动
+ loadDataDelay: 1000,//加载数据时延时。即时间轴进度改变时，延迟多久加载数据
+ autoPlayDuration: 100,//自动播放间隔，越小越快,最小100
+ animationDuration: 100,//动画时间，越小越快。建议小于等于autoPlayDuration
+ loadData: function (time) {//时间改变后加载数据,time为时间字符串，格式为yyyy-MM-dd HH:mm
+ },
+ autoPlayLoadData: function (time) {//自动播放时加载数据，这里最好不要使用异步。需要自动播放的数据提前加载到页面，后续新增的也是，放到页面对象中扩展改数据集合。如果一定要异步，需要保证其使用时间一定是小于autoPlayDuration
+ }
+ });
+```
\ No newline at end of file
diff --git a/css/timeline.css b/css/timeline.css
new file mode 100644
index 0000000..e327b44
--- /dev/null
+++ b/css/timeline.css
@@ -0,0 +1,146 @@
+.timeline {
+ height: 50px;
+ position: relative;
+}
+.timeline .time-tips {
+ width: 130px;
+ font-size: 12px;
+ position: absolute;
+ background-color: rgba(128,128,128,0.5);
+ color: #fff;
+ height: 16px;
+ top: -30px;
+ padding: 2px 0;
+ text-align: center;
+ border-radius: 2px;
+ left: -45px;
+ transition-property: all;
+ transition-duration: 0.1s;
+ transition-timing-function: linear;
+}
+.timeline .time-tips .time-tips-time {
+ font-family: VeraSansMono;
+ font-size: 12px;
+}
+.timeline .time-tips-arrow {
+ position: absolute;
+ bottom: -6px;
+ left: 50%;
+ margin-left: -6px;
+ width: 0;
+ height: 0;
+ border-right: 6px solid transparent;
+ border-left: 6px solid transparent;
+ border-top: 6px solid rgba(128,128,128,0.5);
+}
+.timeline .timeline-button {
+ position: absolute;
+ right: 0;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: #84cdc9;
+}
+.timeline .timeline-button .timeline-play {
+ width: 0;
+ height: 0;
+ margin: 7px 7px 7px 8px;
+ display: inline-block;
+ border-style: solid;
+ border-width: 5px 0 5px 10px;
+ border-color: transparent transparent transparent #299387;
+}
+.timeline .timeline-button .timeline-pause {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 7px;
+ border-style: double;
+ border-width: 0 0 0 10px;
+ border-color: #299387;
+}
+.timeline .timeline-content {
+ position: absolute;
+ left: 0;
+ right: 30px;
+ height: 100%;
+}
+.timeline .timeline-line {
+ height: 25px;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ left: 10px;
+ right: 10px;
+ top: 0;
+ z-index: 10;
+}
+.timeline .timeline-line:after {
+ content: '';
+ background-color: rgba(128,128,128,0.5);
+ position: absolute;
+ top: 0;
+ height: 5px;
+ width: 100%;
+}
+.timeline .timeline-line-limit,
+.timeline .timeline-line-passed {
+ position: absolute;
+ top: 0;
+ width: 0;
+ height: 5px;
+ background-color: #41f8ff;
+ pointer-events: none;
+ transition-property: all;
+ transition-duration: 0.1s;
+ transition-timing-function: linear;
+ z-index: 12;
+}
+.timeline .timeline-line-limit {
+ background-color: #7da8cc;
+ z-index: 11;
+}
+.timeline .timeline-label {
+ color: #fff;
+ display: flex;
+ align-items: center;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 25px;
+ justify-content: space-between;
+}
+.timeline .timeline-label span {
+ font-family: "VeraSansMono";
+ text-align: center;
+ font-size: 12px;
+ display: block;
+ flex: 0 0 20px;
+ position: relative;
+ cursor: default;
+}
+.timeline .timeline-label span:after {
+ z-index: 9;
+ content: '';
+ position: absolute;
+ height: 10px;
+ top: -20px;
+ background-color: rgba(255,255,255,0.5);
+ width: 1px;
+ left: 50%;
+ margin-left: -1px;
+ transition-duration: 0.1s;
+ transition-property: all;
+ transition-timing-function: linear;
+}
+.timeline .timeline-label span:first-child:after {
+ height: 15px;
+ margin-left: 0;
+}
+.timeline .timeline-label span:last-child:after {
+ height: 15px;
+}
+.timeline .timeline-label span.time-passed:after {
+ background-color: #41f8ff;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d7e3cc4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+ 时间轴
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/timeline.js b/js/timeline.js
new file mode 100644
index 0000000..86bac18
--- /dev/null
+++ b/js/timeline.js
@@ -0,0 +1,584 @@
+/**
+ * 时间轴插件，自写
+ * @author 杨黄林
+ * @version 1.0
+ */
+;
+(function ($) {
+ if (!Date.prototype.hasOwnProperty('format')) {
+ Date.prototype.format = function (fmt) {
+ var o = {
+ "M+": this.getMonth() + 1, //月份
+ "d+": this.getDate(), //日
+ "h+": this.getHours() % 12 === 0 ? 12 : this.getHours() % 12, //小时
+ "H+": this.getHours(), //小时
+ "m+": this.getMinutes(), //分
+ "s+": this.getSeconds(), //秒
+ "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+ "S": this.getMilliseconds() //毫秒
+ };
+ var week = {
+ "0": "/u65e5",
+ "1": "/u4e00",
+ "2": "/u4e8c",
+ "3": "/u4e09",
+ "4": "/u56db",
+ "5": "/u4e94",
+ "6": "/u516d"
+ };
+ if (/(y+)/.test(fmt)) {
+ fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+ }
+ if (/(E+)/.test(fmt)) {
+ fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
+ }
+ for (var k in o) {
+ if (new RegExp("(" + k + ")").test(fmt)) {
+ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+ }
+ }
+ return fmt;
+ }
+ }
+
+ /**
+ * 1毫秒
+ * @type {number}
+ */
+ var millseconds = 1;
+
+ /**
+ * 1秒=1000毫秒
+ * @type {number}
+ */
+ var secondWithMillseconds = 1000 * millseconds;
+
+ /**
+ * 1分=60秒
+ * @type {number}
+ */
+ var minuteWithMillSeconds = 60 * secondWithMillseconds;
+
+ /**
+ * 1小时=60分
+ * @type {number}
+ */
+ var hourWithMillseconds = 60 * minuteWithMillSeconds;
+
+ /**
+ * 每个标签宽度为20像素，具体看timeline.css中.timeline-label span的宽度
+ * @type {number}
+ */
+ var labelWidth = 20;
+
+ /**
+ * 时间提示的宽度，具体看timeline.css中.time-tips-time的宽度
+ * @type {number}
+ */
+ var tipsWidth = 130;
+
+ /**
+ * 刻度类型，写json便于调用
+ * @type {{hour: string, minute: string}}
+ */
+ var minScale = {
+ minute: 'minute',
+ hour: 'hour'
+ }
+
+ var defaults = {
+ minScale: minScale.minute,//最小刻度：minute or hour
+ realtime: true,//是否实时刷新时间轴：true or false。为true时，若realtimeDate是当天，则时间轴上的时间进度随系统时间变化而变化
+ limit: true,//是否限制可拖动刻度范围：true or false。为true时，只能在当天开始到realtimeDate范围内拖动
+ date: new Date(),//时间轴时间，会自动取当天的0点到第二天的0作为时间轴刻度
+ startHour: '00',
+ endHour: '00',
+ realtimeDate: new Date(),//实时时间，限制拖动范围开启后，只能在当天0点到这个时间段之间拖动
+ loadDataDelay: 1000,//加载数据时延时。即时间轴进度改变时，延迟多久加载数据
+ autoPlayDuration: 100,//自动播放间隔，越小越快,最小100
+ animationDuration: 100,//动画时间，越小越快。建议小于等于autoPlayDuration
+ loadData: function (time) {//加载数据,time为时间字符串，格式为yyyy-MM-dd HH:mm
+ },
+ autoPlayLoadData: function (time) {//自动播放时加载数据，这里最好不要使用异步。需要自动播放的数据提前加载到页面，后续新增的也是，放到页面对象中扩展改数据集合。如果一定要异步，需要保证其使用时间一定是小于autoPlayDuration
+ }
+ };
+
+ /**
+ * 插件方法
+ * @param containerElement 容器对象
+ * @param options 插件参数
+ */
+ var timeline = function (containerElement, options) {
+ this.$containerElement = $(containerElement);
+ this.options = options;
+ this.startedAutoRefreshLimitScale = false;
+
+ if (this.options.autoPlayDuration < 100)
+ this.options.autoPlayDuration = 100;
+
+ //将日期格式化为当天0点
+ this.options.date = new Date(this.options.date.format('yyyy-MM-dd 00:00:00'));
+
+ /**
+ * 1、算出初始化时，以毫秒为单位的时间。包括当天0时的事件、当天24时（第二天0时）的时间、当前的时间
+ */
+ this.calculateTime();
+ /**
+ * 2、根据算出的时间以及时间轴上刻度类型，算出初始化时，总刻度数、可拖动刻度数
+ */
+ this.calculateScaleNum();
+ /**
+ * 3、根据初始化时计算出的刻度数，初始化插件DOM节点
+ */
+ this.initDom();
+ /**
+ * 4、通过插件节点获取时间轴部分的宽度，根据刻度类型和刻度数，计算出每个刻度的宽度
+ */
+ this.initFixedWidth();
+ /**
+ * 5、根据可拖动刻度数，计算出可拖动刻度的总宽度
+ */
+ this.calculateLimitWidth();
+ /**
+ * 6、绑定鼠标事件
+ */
+ this.initEvent();
+ /**
+ * 开启自动刷新可拖动刻度功能
+ */
+ if (this.options.realtime) {
+ this.autoRefreshLimitScale();
+ } else {
+ this.calculateProgress(this.limitScaleNum(), true);
+ }
+
+ var that = this;
+ window.addEventListener('resize', function () {
+ that.resize();
+ }, true);
+ }
+
+ timeline.prototype = {
+ resize: function () {
+ this.calculateScaleNum();
+ this.initFixedWidth();
+ // 偏移量即为已过去时间的时间轴长度，除以固定的每个刻度的宽度，得到已过的刻度数
+ var sacleNum = Math.round(this.$containerElement.find('.timeline-line-passed').width() / this.scaleWidth);
+ this.showTimeTips(sacleNum);
+ if (this.options.realtime) {
+ this.autoRefreshLimitScale();
+ }
+ },
+ /**
+ * 获取开始、结束、当前时间相对于当天0时0分0秒时的毫秒数
+ */
+ calculateTime: function () {
+ if (!this.isSameDay(this.options.date, this.options.realtimeDate)) {
+ this.options.date.setTime(new Date(this.options.realtimeDate.format('yyyy-MM-dd 00:00:00')).getTime());
+ }
+ var date = this.options.date;
+ var scaleYear = date.getFullYear();
+ var scaleMonth = date.getMonth();
+ var scaleDate = date.getDate();
+ var today = new Date();
+ if (this.isSameDay(this.options.date, today)) {
+ //当天，则每次计算当前时间时，从系统时间获取
+ this.currentTime = new Date(
+ today.getFullYear(),
+ today.getMonth(),
+ today.getDate(),
+ today.getHours(),
+ today.getMinutes(),
+ 0).getTime();
+ this.options.realtimeDate.setTime(this.currentTime);
+ } else {
+ //不是当天，则每次计算时间前让其时间根据刻度类型加1个刻度的时间毫秒数
+ if (this.startedAutoRefreshLimitScale) {
+ if (this.options.minScale === minScale.minute) {
+ this.options.realtimeDate.setTime(this.options.realtimeDate.getTime() + minuteWithMillSeconds);
+ } else {
+ this.options.realtimeDate.setTime(this.options.realtimeDate.getTime() + hourWithMillseconds);
+ }
+ }
+ this.currentTime = new Date(
+ this.options.realtimeDate.getFullYear(),
+ this.options.realtimeDate.getMonth(),
+ this.options.realtimeDate.getDate(),
+ this.options.realtimeDate.getHours(),
+ this.options.realtimeDate.getMinutes(),
+ 0).getTime();
+ }
+ this.startTime = new Date(scaleYear, scaleMonth, scaleDate, parseInt(this.options.startHour), 0, 0,).getTime();
+ if (parseInt(this.options.endHour) === 0 || parseInt(this.options.endHour) === 24) {
+ this.endTime = new Date(scaleYear, scaleMonth, scaleDate + 1, parseInt(this.options.endHour), 0, 0,).getTime();
+ } else {
+ this.endTime = new Date(scaleYear, scaleMonth, scaleDate, parseInt(this.options.endHour), 0, 0,).getTime();
+ }
+ },
+ /**
+ * 根据刻度类型，以及开始、结束、当前时间与当前0时0分0秒的时间差（毫秒数），计算出有多少刻度（包括总刻度以及可拖动刻度）
+ */
+ calculateScaleNum: function () {
+ var timeDiffWithMillseconds = this.endTime - this.startTime;
+ var limitTimeDiffWithMillseconds = this.currentTime - this.startTime;
+ var minutes, hours, limitMinutes, limitHours;
+ if (this.options.minScale === minScale.minute) {
+ minutes = Math.floor(timeDiffWithMillseconds / minuteWithMillSeconds);
+ hours = Math.floor(timeDiffWithMillseconds / hourWithMillseconds);
+ limitMinutes = Math.floor(limitTimeDiffWithMillseconds / minuteWithMillSeconds);
+ limitHours = Math.floor(limitTimeDiffWithMillseconds / hourWithMillseconds);
+ } else {
+ hours = Math.floor(timeDiffWithMillseconds / hourWithMillseconds);
+ limitHours = Math.floor(limitTimeDiffWithMillseconds / hourWithMillseconds);
+ }
+
+ this.scale = {
+ minutes: minutes,
+ hours: hours,
+ limitMinutes: limitMinutes,
+ limitHours: limitHours
+ };
+ },
+ /**
+ * 初始化dom结构
+ */
+ initDom: function () {
+ //伪类不能js修改样式，因此必须添加一个style标签
+ this.$containerElement.append(
+ [
+ ''
+ ].join('')
+ );
+ this.$containerElement.append(
+ [
+ '',
+ ' ',
+ '
'
+ ].join('')
+ );
+ this.$containerElement.append(
+ [
+ '',
+ '
',
+ ' ',
+ ' ',
+ '
',
+ '
',
+ '
',
+ '
',
+ '