javascript日歷減去日期
[英]javascript Calendar subtracting dates
問題描述
我有一個日歷，允許2次單擊然后重置。 我想要點擊兩個日歷日期之間的天數差異。 然后，我將其顯示在另一頁上。 我嘗試分配由onclick函數分配的本地存儲變量，該變量由onclick函數為每個單擊的日歷日分配，然后在第3次單擊后重置。 我想將所有日期相減的順序從高到低排序，以使我的數學在選擇的任何兩天內都有效。 問題是當我的變量通過時為負數，而第二次單擊時創建的變量為正。 對於解決此問題的策略，我將不勝感激。
<!--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>
1 個解決方案
解決方案1
0 2018-02-23 01:32:59
首先，您在此處采用的方法太糟了，我認為您應該重新考慮日歷的呈現方式，事件的處理方式以及數據的存儲方式！ 同時，我將盡力為您提供幫助...
您已經切掉了很多代碼，但是這種模式是顯而易見的。 大概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;
用JavaScript減去日期
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.