如何使用jquery/javascript控制时间

我真的做不到，所以我需要学习如何做到这一点

我想用jquery或javascript控制时间，不管它是哪一个。我想解释一下我的场景是：

我有代理

页面，我的所有代理都有模态，而这些模态有open-hours，如果你看看我的例子，closed-hours..

例如，如果我的data-open-hour是09:00但是如果现在时间10:00，请删除09:00选项并进行第一个10:00，如果data-closed-hours 20:00，如果时间超过20:00则禁用Call Today

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">'+getOptions(openHours, closedHours, true)+'</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}
$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});
function callNow() {
  return '<option class="call-now">Call Now</option>';
}
function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    options += '<option>Call at '+h+':00</option>'
  }
  return options;
}
$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}
.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

我在你的代码中做了一些改变

  var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    if (time < h && now == true) {
      options += '<option>Call at ' + h + ':00</option>'
    } else if (!now) {
      options += '<option>Call at ' + h + ':00</option>'
    }
  }

现在，这将检查当前小时并删除之前的任何小时。

我也改变了这一点

  if ($('.call-today').is(':selected')) {
    $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
    $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }

我现在将在您更改选择时重置选项。

var openHours;
var closedHours;
function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">' + getOptions(openHours, closedHours, true) + '</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}
$(document).on("click", ".open-agency", function() {
  openHours = $(this).data("open-hours");
  closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});
function callNow() {
  return '<option class="call-now">Call Now</option>';
}
function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open, close, now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    if (time < h && now == true) {
      options += '<option>Call at ' + h + ':00</option>'
    } else if (!now) {
      options += '<option>Call at ' + h + ':00</option>'
    }
  }
  return options;
}
$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  $('.hour-call option').remove();
  if ($('.call-today').is(':selected')) {
    $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
    $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}
.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

好吧，如果您只想显示高于一天中实际小时的小时，则需要在getOptions()函数中测试迭代的小时。

这是循环应该如何：

  for (var h = +start; h <= +end; h++) {
    var currHour = (new Date()).getHours();
    if(h>currHour)
        options += '<option>Call at '+h+':00</option>'
  }

演示：

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">'+getOptions(openHours, closedHours, true)+'</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}
$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});
function callNow() {
  return '<option class="call-now">Call Now</option>';
}
function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    var currHour = (new Date()).getHours();
    if(h>currHour)
        options += '<option>Call at '+h+':00</option>'
  }
  return options;
}
$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}
.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

你可以

从Date()对象中获取时间，如下所示：

//get current hours from the current Date object
var date = new Date();
var currentHour = date.getHours();

然后更新您的 for 循环以仅从currentHour + 1开始：

for (var h = currentHour; h <= end; h++) {
    options += '<option>Call at '+h+':00</option>'
}

要禁用"今天打电话"，您可以在agencyModal()功能中检查日期并将disabled关键字添加到<option>。

'<option class="call-today"'+(new Date().getHours() > closedHours.split(':')[0] ? 'disabled': '' )+'>'

但是，为了在选择"明天打电话"时更改回营业时间的完整列表，您需要第一个<select>的事件侦听器，然后从该函数内部应用相关更改。

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today"'+(new Date().getHours() > closedHours.split(':')[0] ? 'disabled': '' )+'>Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">'+getOptions(openHours, closedHours, true)+'</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}
$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});
function callNow() {
  return '<option class="call-now">Call Now</option>';
}
function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  
  
  //get current hours from the current Date object
  var date = new Date();
  var currentHour = date.getHours();
  
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = currentHour + 1; h <= end; h++) {
    options += '<option>Call at '+h+':00</option>'
  }
  return options;
}
$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}
.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

相关内容

最新更新

热门标签：