javascript日历减去日期

Question

I have a calendar that allows 2 clicks then resets. 我有一个日历，允许2次单击然后重置。 I want the difference in days between the 2 calendar dates clicked. 我想要点击两个日历日期之间的天数差异。 I then display this on another page. 然后，我将其显示在另一页上。 I tried assigning local storage variables that are assigned by a onclick function for each calendar day clicked then reset after the 3rd click. 我尝试分配由onclick函数分配的本地存储变量，该变量由onclick函数为每个单击的日历日分配，然后在第3次单击后重置。 I wanted to subtract all of the dates ordering the highest number to lowest in an attempt to make my math work for any 2 days picked. 我想将所有日期相减的顺序从高到低排序，以使我的数学在选择的任何两天内都有效。 The problem is when my variables come through they are negative whereas the variable created on the second click needs to be positive. 问题是当我的变量通过时为负数，而第二次单击时创建的变量为正。 I would really appreciate some help for a strategy to resolve this. 对于解决此问题的策略，我将不胜感激。

<!--Booking.html-->

 var clickCount = 0; var clickCountMax = 2; document.getElementById("grid-calendar").onclick = function() { clickCount ++; if(clickCount > clickCountMax) { document.getElementById("h1").style.background = ""; document.getElementById("h2").style.background = ""; document.getElementById("h3").style.background = ""; document.getElementById("h4").style.background = ""; document.getElementById("h5").style.background = ""; document.getElementById("h6").style.background = ""; document.getElementById("h7").style.background = ""; document.getElementById("h8").style.background = ""; document.getElementById("h9").style.background = ""; document.getElementById("h10").style.background = ""; document.getElementById("h11").style.background = ""; document.getElementById("h12").style.background = ""; document.getElementById("h13").style.background = ""; document.getElementById("h14").style.background = ""; document.getElementById("h15").style.background = ""; document.getElementById("h16").style.background = ""; document.getElementById("h17").style.background = ""; document.getElementById("h18").style.background = ""; document.getElementById("h19").style.background = ""; document.getElementById("h20").style.background = ""; document.getElementById("h21").style.background = ""; document.getElementById("h22").style.background = ""; document.getElementById("h23").style.background = ""; document.getElementById("h24").style.background = ""; document.getElementById("h25").style.background = ""; document.getElementById("h26").style.background = ""; document.getElementById("h27").style.background = ""; document.getElementById("h28").style.background = ""; document.getElementById("h29").style.background = ""; document.getElementById("h30").style.background = ""; localStorage.setItem("h1", '0'); localStorage.setItem("h2", '0'); localStorage.setItem("h3", '0'); localStorage.setItem("h4", '0'); clickCount =0; return; } }; function h1() { document.getElementById("h1").style.background = "green"; localStorage.setItem("h1", '1'); } function h2() { document.getElementById("h2").style.background = "green"; localStorage.setItem("h2", '2'); } function h3() { document.getElementById("h3").style.background = "green"; localStorage.setItem("h3", '3'); } function h4() { document.getElementById("h4").style.background = "green"; localStorage.setItem("h4", '4'); }

 <head> <link rel="stylesheet" href="booking.css"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="javascript" href="bootstrap-3.3.7-dist/js/bootstrap.js"> </head> <?php session_start(); if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) { $user_logged_in= 'true'; } else { // header('Location: staffindex.html'); } ?> <script> localStorage.setItem("h1", '0'); localStorage.setItem("h2", '0'); localStorage.setItem("h3", '0'); localStorage.setItem("h4", '0'); </script> <div class="container"> <h1>Bootstrap - Booking Calendar</h1> <div id ="grid-calendar" class="grid-calendar"> <div class="row calendar-week-header"> <div class="col-xs-1 grid-cell"><div><div><span>S</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>M</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>T</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>W</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>T</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>F</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>S</span></div></div> </div> </div> <div class="row calendar-week"> <div class="col-xs-1 grid-cell previous-month"><div><div> <span>31</span></div></div></div> <div onclick="h1()" class="col-xs-1 grid-cell"><div id="h1"><div> <span>1</span></div></div></div> <div onclick="h2()" class="col-xs-1 grid-cell"><div id="h2"><div> <span>2</span></div></div></div> <div onclick="h3()" class="col-xs-1 grid-cell"><div id="h3"><div> <span>3</span></div></div></div> <div onclick="h4()" class="col-xs-1 grid-cell"><div id="h4"><div> <span>4</span></div></div></div> <div onclick="h5()" class="col-xs-1 grid-cell"><div id="h5"><div> <span>5</span></div></div></div> <div onclick="h6()" class="col-xs-1 grid-cell"><div id="h6"><div> <span>6</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h7()" class="col-xs-1 grid-cell"><div id="h7"><div> <span>7</span></div></div></div> <div onclick="h8()" class="col-xs-1 grid-cell"><div id="h8"><div> <span>8</span></div></div></div> <div onclick="h9()" class="col-xs-1 grid-cell"><div id="h9"><div> <span>9</span></div></div></div> <div onclick="h10()" class="col-xs-1 grid-cell"><div id="h10"><div> <span>10</span></div></div></div> <div onclick="h11()" class="col-xs-1 grid-cell"><div id="h11"><div> <span>11</span></div></div></div> <div onclick="h12()" class="col-xs-1 grid-cell"><div id="h12"><div> <span>12</span></div></div></div> <div onclick="h13()" class="col-xs-1 grid-cell"><div id="h13"><div> <span>13</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h14()" class="col-xs-1 grid-cell"><div id="h14"><div> <span>14</span></div></div></div> <div onclick="h15()" class="col-xs-1 grid-cell"><div id="h15"><div> <span>15</span></div></div></div> <div onclick="h16()" class="col-xs-1 grid-cell"><div id="h16"><div> <span>16</span></div></div></div> <div onclick="h17()" class="col-xs-1 grid-cell"><div id="h17"><div> <span>17</span></div></div></div> <div onclick="h18()" class="col-xs-1 grid-cell"><div id="h18"><div> <span>18</span></div></div></div> <div onclick="h19()" class="col-xs-1 grid-cell"><div id="h19"><div> <span>19</span></div></div></div> <div onclick="h20()" class="col-xs-1 grid-cell"><div id="h20"><div> <span>20</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h21()" class="col-xs-1 grid-cell"><div id="h21"><div> <span>21</span></div></div></div> <div onclick="h22()" class="col-xs-1 grid-cell"><div id="h22"><div> <span>22</span></div></div></div> <div onclick="h23()" class="col-xs-1 grid-cell"><div id="h23"><div> <span>23</span></div></div></div> <div onclick="h24()" class="col-xs-1 grid-cell"><div id="h24"><div> <span>24</span></div></div></div> <div onclick="h25()" class="col-xs-1 grid-cell"><div id="h25"><div> <span>25</span></div></div></div> <div onclick="h26()" class="col-xs-1 grid-cell"><div id="h26"><div> <span>26</span></div></div></div> <div onclick="h27()" class="col-xs-1 grid-cell"><div id="h27"><div> <span>27</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h28()" class="col-xs-1 grid-cell"><div id="h28"><div> <span>28</span></div></div></div> <div onclick="h29()" class="col-xs-1 grid-cell"><div id="h29"><div> <span>29</span></div></div></div> <div onclick="h30()" class="col-xs-1 grid-cell"><div id="h30"><div> <span>30</span></div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>1</span> </div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>2</span> </div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>3</span> </div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>4</span> </div></div></div> </div> </div> </div>

.....................................


<!--Book.html-->

  document.getElementById("result").innerHTML = parseInt(localStorage.getItem("h4")) - parseInt(localStorage.getItem("h3")) - parseInt(localStorage.getItem("h2")) - parseInt(localStorage.getItem("h1")); for(var i in localStorage) { console.log(i + ' = ' + localStorage[i]); }

  <div id ="result"> </div>

Answer 1

Firstly, the approach you are taking here is an awful mess and I think you should reconsider how the calendar is rendered, how the events are handled, and how you store the data! 首先，您在此处采用的方法太糟了，我认为您应该重新考虑日历的呈现方式，事件的处理方式以及数据的存储方式！ In the meantime I will try to help with what you have... 同时，我将尽力为您提供帮助...

You have cut out chunks of code, but the pattern is apparent. 您已经切掉了很多代码，但是这种模式是显而易见的。 Presumably the localStorage will have 2 out of the 31 "hN" values set. 大概localStorage将设置31个“ hN”值中的2个。 And also you will presumably clear those down after retrieving them. 而且，您大概会在检索它们后清除它们。

In which case you could do something like this to find the max and min dates that were set. 在这种情况下，您可以执行类似的操作来查找设置的最大日期和最小日期。 The subtraction is then very simple. 减法则非常简单。

var checkKey, checkDate, minDate = 31, maxDate = 1;
for (var i = 1; i <= 31; i++) {
  checkKey = "h" + i;
  checkDate = parseInt(localStorage[checkKey]);
  localStorage.removeItem(checkKey);
  if (checkDate) {
    minDate = Math.min(minDate, checkDate);
    maxDate = Math.max(maxDate, checkDate);
  }
}

var number_of_days_inclusive = maxDate - minDate + 1;

javascript日历减去日期

问题描述

1 个解决方案

解决方案1
0 2018-02-23 01:32:59

javascript日历减去日期

问题描述

1 个解决方案

解决方案1 0 2018-02-23 01:32:59

解决方案1
0 2018-02-23 01:32:59