console
function onTimeUpdate() {
if ($(".time-cursor").position().left >= 1440 + $(".time-day").position().left) {
$(".time-cursor")[0].style.left = (1440 - 1 + $(".time-day").position().left) + "px";
}
var m = moment().hour(0).minute($(".time-cursor").position().left - $(".time-day").position().left);
$(".time-cursor-text").text(m.format("HH:mm")).data("changed", true);
}
function renderTimeTexts() {
$(".time-day .time-text").remove();
for (var i = 0; i < 24; i++) {
var $text = $("<div class='time-text'></div>");
var m = moment().hour(i).minute(0).second(0);
$text.text(m.format("HH:mm"));
$text.addClass("time-" + m.format("HH"));
$(".time-day").append($text);
}
}
function renderTimeMinutes() {
$(".time-day .time-minute").remove();
for (var i = 0; i < 1440; i++) {
var $minute = $("<div class='time-minute'></div>");
var m = moment().hour(0).minute(i);
$minute.addClass("time-" + m.format("HH-mm"));
$(".time-day").append($minute);
}
}
if (isIntegrate) {
$(".main-header").show();
$("#guangchang").attr("href", "/index.html?isIntegrate=true")
}
$(document).on("click", ".box-header .form-group .date", function(e) {
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});
}) $(document).on("mousedown", ".time-cursor-text,.time-day", function(e) {
$(this).data("pageX", e.pageX);
}).on("mouseup", function(e) {
if ($(".time-cursor-text").data("changed")) {
onChangeTime();
$(".time-cursor-text").removeData("changed");
}
$(".time-cursor-text,.time-day").removeData("pageX");
}).on("mousemove", function(e) {
var pageX = $(".time-cursor-text").data("pageX");
if (pageX != undefined) {
$(".time-cursor-text").data("pageX", e.pageX);
var moveX = e.pageX - pageX;
var left = $(".time-cursor").position().left + moveX;
left = left < 0 ? 0 : left;
left = left > ($(".time-rule").innerWidth() - 1) ? ($(".time-rule").innerWidth() - 1) : left;
$(".time-cursor")[0].style.left = left + "px";
onTimeUpdate();
}
pageX = $(".time-day").data("pageX");
var curLeft = $(".time-day").position().left;
if (pageX != undefined && ($(".time-rule").innerWidth() < $(".time-day").outerWidth() || curLeft < 0)) {
$(".time-day").data("pageX", e.pageX);
var moveX = e.pageX - pageX;
var left = $(".time-day").position().left + moveX;
left = left > 0 ? 0 : left;
var minLeft = $(".time-rule").innerWidth() - $(".time-day").outerWidth();
left = left < minLeft ? minLeft: left;
$(".time-day")[0].style.left = left + "px";
onTimeUpdate();
}
}).on("mousedown", ".time-minute", function(e) {
var left = $(this).position().left + $(".time-day").position().left;
$(".time-cursor")[0].style.left = left + "px";
onTimeUpdate();
})
<div class="time-rule">
<div class="time-day">
<div class="time-minute active" title="00:00">
</div>
<div class="time-minute active" title="00:01">
</div>
<div class="time-minute active" title="00:02">
</div>
<div class="time-minute active" title="00:03">
</div>
<div class="time-minute active" title="00:04">
</div>
<div class="time-minute active" title="00:05">
</div>
<div class="time-minute active" title="00:06">
</div>
<div class="time-minute active" title="00:07">
</div>
<div class="time-minute active" title="00:08">
</div>
<div class="time-minute active" title="00:09">
</div>
<div class="time-minute active" title="00:10">
</div>
<br/>
<div class="time-text-first time-00" title="00:00">
00:00
</div>
<div class="time-text" title="01:00">
01:00
</div>
<div class="time-text" title="02:00">
02:00
</div>
<div class="time-text" title="03:00">
03:00
</div>
<div class="time-text" title="04:00">
04:00
</div>
<div class="time-text" title="05:00">
05:00
</div>
<div class="time-text" title="06:00">
06:00
</div>
<div class="time-text" title="07:00">
07:00
</div>
<div class="time-text" title="08:00">
08:00
</div>
<div class="time-text" title="09:00">
09:00
</div>
<div class="time-text" title="10:00">
10:00
</div>
<div class="time-text" title="11:00">
11:00
</div>
<div class="time-text" title="12:00">
12:00
</div>
<div class="time-text" title="13:00">
13:00
</div>
<div class="time-text" title="14:00">
14:00
</div>
<div class="time-text" title="15:00">
15:00
</div>
<div class="time-text" title="16:00">
16:00
</div>
<div class="time-text" title="17:00">
17:00
</div>
<div class="time-text" title="18:00">
18:00
</div>
<div class="time-text" title="19:00">
19:00
</div>
<div class="time-text" title="20:00">
20:00
</div>
<div class="time-text" title="21:00">
21:00
</div>
<div class="time-text" title="22:00">
22:00
</div>
<div class="time-text" title="23:00">
23:00
</div>
</div>
<div class="time-cursor" style="left: 292px;">
<div class="time-cursor-text">
04:52
</div>
</div>
</div>
.time-rule {
overflow: hidden;
position: relative;
height: 60px;
margin: 0 auto;
width: 100%;
font-size: 12px;
max-width: 1440px;
background-color: #CCC;
margin-top: 30px;
}
.time-day {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 1440px;
cursor: pointer;
}
.time-minute {
float: left;
width: 1px;
height: 8px;
margin: 0;
}
.time-minute.active {
background-color: green;
height: 15px;
}
.time-text {
float: left;
width: 60px;
border-left: 1px solid #999;
border-top: 1px solid #999;
-ms-user-select: none;
user-select: none;
text-align: center;
height: 25px;
line-height: 25px;
box-sizing: border-box;
}
.time-00 {
border-left: 0;
}
.time-cursor {
position: absolute;
left: 0;
top: 0;
height: 40px;
width: 2px;
background-color: red;
text-align: center;
}
.time-cursor-text {
position: absolute;
padding: 0 5px;
width: 60px;
left: -30px;
top: 40px;
border: 1px solid red;
height: 15px;
line-height: 15px;
cursor: move;
background-color: white;
-ms-user-select: none;
user-select: none;
}
.time-text-first {
float: left;
width: 60px;
border-top: 1px solid #999;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-align: center;
height: 25px;
line-height: 25px;
border-left: 0;
}