JavaScript日历减去日期

我有一个日历，可以单击2个然后重置。我希望单击两个日历日期之间的天数。然后，我将其显示在另一个页面上。我尝试分配每个日历日单击的ONCLICK函数分配的本地存储变量，然后单击第三个单击后重置。我想减去所有订购最高数量的日期，以使我的数学工作在任何两天内进行工作。问题是当我的变量通过时，它们为负，而在第二次点击中创建的变量需要为正。我真的很感谢一些解决此问题的策略的帮助。

<!--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>

首先，您在这里采用的方法是一个糟糕的混乱，我认为您应该重新考虑如何呈现日历，如何处理事件以及如何存储数据！同时，我将尝试帮助您拥有的...

您已经切断了大量的代码，但是模式很明显。据推测，LocalStorage将在设置31个" HN"值中有2个。而且，您大概会在取回后清除那些。

在这种情况下，您可以这样做以找到设置的最大和最小日期。然后减去非常简单。

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;

相关内容

最新更新

热门标签：