我有一个允许2次点击然后重置的日历。我想要点击两个日历日期之间的天数差异。然后我在另一页上显示这个。我尝试在点击的每个日历日分配由onclick函数分配的本地存储变量，然后在第3次点击后重置。我想减去所有订购最高数字到最低数字的日期，以便让我的数学工作在任何2天内被选中。问题是当我的变量通过时它们是负数而在第二次点击时创建的变量需要是正数。 我真的很感激为解决这个问题的策略提供一些帮助。
<!--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>
答案 0 :(得分：0)
首先，你在这里采取的方法非常糟糕，我认为你应该重新考虑如何呈现日历，如何处理事件以及如何存储数据！与此同时，我会尽力帮助你拥有......
你已经删除了大量的代码，但模式很明显。据推测，localStorage将拥有31个＆＃34; hN＆＃34;值集。并且你可能会在检索它们之后清除它们。
在这种情况下，您可以执行以下操作来查找已设置的最大和最小日期。减法非常简单。
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;