問題 - 具有多個 if else 語句的函數

Question

我想創建一個函數，在特定時間替換元素並更改內部的 HTML。 我正在以小時和分鍾為單位獲取當前時間，並且我正在嘗試通過邏輯運算符來解決它。 我不知道如何正確解決它（我還不熟悉對象或方法），但我盡力了 - 如果有人向我展示如何使其工作或更好的方法，我將不勝感激這個（但它應該只是 JavaScript 或 jQuery）。

 function messageOnSpecificTime(){ var date=new Date(); var hour=date.getHours(); var minutes=date.getMinutes(); // var messageBox=document.getElementsByClassName("iziToast-message"); if (hour>=8 && hour<9 && minutes>=0 && minutes<30){ document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=8 && hour<9 && minutes>=30 && minutes<59){ document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=9 && hour<10 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=9 && hour<10 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=10 && hour<11 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=10 && hour<11 && minutes>=30 && minutes<59){ document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=11 && hour<12 && minutes>=0 && minutes<30){ document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=11 && hour<12 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=12 && hour<13 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=12 && hour<13 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=13 && hour<14 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=13 && hour<14 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=14 && hour<15 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=14 && hour<15 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=15 && hour<16 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=15 && hour<16 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=16 && hour<17 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=16 && hour<17 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=17 && hour<18 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=17 && hour<18 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=18 && hour<19 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=18 && hour<19 && minutes>=30 && minutes<59) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else if (hour>=19 && hour<20 && minutes>=0 && minutes<30) { document.getElementsByClassName("iziToast-message").innerHTML = "Message 8:00 - 8:30" } else { document.getElementsByClassName("iziToast-message").innerHTML = "All for today folks!" } } window.onload = function() { setInterval(messageOnSpecificTime(),6000) }

Answer 1

使用條件（三元）運算符。
我已將hour+":"+(minutes<30?"00":"30")+" to "+(hour+(minutes<30?0:1))+":"+(minutes<30?"30":"00")拆分hour+":"+(minutes<30?"00":"30")+" to "+(hour+(minutes<30?0:1))+":"+(minutes<30?"30":"00")在代碼片段中添加到多行，以便能夠跟蹤邏輯。

 function messageOnSpecificTime(date=new Date()){ // var date=new Date(); var hour=date.getHours(); var minutes=date.getMinutes(); var message= hour+":"+ (minutes<30?"00":"30")+ " to "+ (hour+ (minutes<30?0:1) )+ ":"+ (minutes<30?"30":"00") ; return message; }; console.log(messageOnSpecificTime()); console.log(messageOnSpecificTime(new Date("8/8/88 7:00"))); console.log(messageOnSpecificTime(new Date("8/8/88 7:18"))); console.log(messageOnSpecificTime(new Date("8/8/88 7:47"))); console.log(messageOnSpecificTime(new Date("8/8/88 23:47")));

Answer 2

除了這從選擇列表中獲取一個小時和分鍾並且需要將小時值轉換為一個數字以加 1（這在實際代碼中不會發生，因為它應該已經是一個數字）之外，為什么不這樣做：

 function messageOnSpecificTime() { let h = document.getElementById("hours").value; let m = document.getElementById("minutes").value; let msg = ""; if (m < 30) { msg = h + ":00 - " + h + ":30"; } else { msg = h + ":30 - " + (Number(h) + 1) + ":00"; } document.getElementById("message").innerHTML = msg; }

 Pick an hour: <select id="hours"> <option value=0>0</option> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> <option value=11>11</option> <option value=12>12</option> <option value=13>13</option> <option value=14>14</option> <option value=15>15</option> <option value=16>16</option> <option value=17>17</option> <option value=18>18</option> <option value=19>19</option> <option value=20>20</option> <option value=21>21</option> <option value=22>22</option> <option value=23>23</option> </select> Pick minutes: <select id="minutes"> <option value=0>0</option> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> <option value=11>11</option> <option value=12>12</option> <option value=13>13</option> <option value=14>14</option> <option value=15>15</option> <option value=16>16</option> <option value=17>17</option> <option value=18>18</option> <option value=19>19</option> <option value=20>20</option> <option value=21>21</option> <option value=22>22</option> <option value=23>23</option> <option value=24>24</option> <option value=25>25</option> <option value=26>26</option> <option value=27>27</option> <option value=28>28</option> <option value=29>29</option> <option value=30>30</option> <option value=31>31</option> <option value=32>32</option> <option value=33>33</option> <option value=34>34</option> <option value=35>35</option> <option value=36>36</option> <option value=37>37</option> <option value=38>38</option> <option value=39>39</option> <option value=40>40</option> <option value=41>41</option> <option value=42>42</option> <option value=43>43</option> <option value=44>44</option> <option value=45>45</option> <option value=46>46</option> <option value=47>47</option> <option value=48>48</option> <option value=49>49</option> <option value=50>50</option> <option value=51>51</option> <option value=52>52</option> <option value=53>53</option> <option value=54>54</option> <option value=55>55</option> <option value=56>56</option> <option value=57>57</option> <option value=58>58</option> <option value=59>59</option> </select> <button onclick="messageOnSpecificTime();">Show message</button><br> <br> <span id="message"></span>

Answer 3

假設您在每個時間范圍內都有一條單獨的消息，您可以構建一個計時器來顯示消息，並將消息視為數據而不是它們作為代碼的一部分，就像它們在您的示例中一樣。 在下面的代碼中，消息存儲在一個簡單的對象中，一個表示時間的鍵，一個表示消息本身的值。 計時器負責選擇正確的消息。

 // Store the messages in an object, like this: const messages = { 80: 'Message shown between 8:00 - 8:30', 85: 'Message shown between 8:30 - 9:00', 90: 'Message shown between 9:00 - 9:30', 95: 'Message shown between 9:30 - 10:00', 100: 'Message shown between 10:00 - 10:30', 105: 'Message shown between 10:30 - 11:00', 110: 'Message shown between 11:00 - 11:30', 115: 'Message shown between 11:30 - 12:00', 120: 'Message shown between 12:00 - 12:30', 125: 'Message shown between 12:30 - 13:00', 130: 'Message shown between 13:00 - 13:30', 135: 'Message shown between 13:30 - 14:00', 140: 'Message shown between 14:00 - 14:30', 145: 'Message shown between 14:30 - 15:00', 150: 'Message shown between 15:00 - 15:30', 155: 'Message shown between 15:30 - 16:00', 160: 'Message shown between 16:00 - 16:30', 165: 'Message shown between 16:30 - 17:00', 170: 'Message shown between 17:00 - 17:30', 175: 'Message shown between 17:30 - 18:00', 180: 'Message shown between 18:00 - 18:30', 185: 'Message shown between 18:30 - 19:00', 190: 'Message shown between 19:00 - 19:30', 0: 'All for today folks!' }; const now = new Date(), // A reference to the element to show the message in pad = document.querySelector('.iziToast-message'); // Time to go before the next half-/full-hour occurs let nextHalf = (((59 - now.getMinutes()) % 30 + 1) * 60 - now.getSeconds()) * 1000, // Index following time, initialized to the nearest half-/full-hour time = 10 * now.getHours() + Math.floor(now.getMinutes() / 30) * 5; // Set the timer, execute the function once immediately to show the current message (function showMessage() { // Set an index matching a key in messages object const key = (time < 80 || time > 190) ? 0 : time; // Rewrite the content of the message on the page pad.textContent = messages[key]; // Increase the time by half an hour in range 0 - 235 (0:00 - 23:30) time = (time + 5) % 240; // Run this function again when the next half-/full-hour occurs setTimeout(showMessage, nextHalf); }()); // Set the delay to take a half an hour, will be used when `showMessage` is called next time nextHalf = 1800000;

 <div class="iziToast-message"></div>

(function () {...}()); 構造是InstantInvokedFunctionExpression 。

消息與實際的可執行部分分開，並包含在messages對象的屬性中。 屬性的鍵表示應該顯示屬性中的消息的開始時間。 當鍵反映實際時間時，更容易更新對象中的消息。 這也可以使用數組來完成，但是對於數組，時間和消息索引之間的關系不太清楚，因為最好避免使用稀疏數組。

我還在消息中選擇了硬編碼的時間范圍，因為它比創建動態時間范圍需要更少的代碼，並且您可以騰出雙手將消息中的范圍定位在您想要的任何位置。

首先，代碼計算從當前時間到下一個最接近的半小時/整小時的時間 ( nextHalf )。 然后創建一個簡化的時間索引 ( time )，該索引與messages對象中的鍵匹配。 然后showMessage ，計算當前消息的key（ key ）。 如果當前時間超出范圍 (8:00 - 19:30)，則鍵默認為0 。 然后重寫消息框的內容，計算下一次showMessage調用的新時間。 新調用被延遲 ( nextHalf )，計時器在下一個半小時/整小時觸發。

要了解代碼的工作原理，必須知道setTimeout不會阻止當前腳本的執行。 相反，它會立即執行，並且回調和延遲參數與其當前值一起傳遞。 在setTimeout調用后為保持延遲的變量設置新值不會影響先前設置的計時器。 新的延遲僅用於showMessage函數的延遲未來調用。

相對復雜的計時器的優點是，您不必在短時間內重新編寫消息，因為計時器會校准到實際時間，並每半小時調用一次。

jsFiddle 的演示。 在演示中，半小時只需要一秒鍾，比等待半小時看事情發生更無聊。

值得注意的是，可以編寫更簡單、甚至更准確的計時器版本。 此函數包含所有需要的變量，不包括messages對象和對消息框元素 ( pad ) 的引用，它們仍包含在外部作用域中。

(function showMessage () {
    const now = new Date(),
      time = 10 * now.getHours() + Math.floor(now.getMinutes() / 30) * 5,
      key = (time < 80 || time > 190) ? 0 : time,
      nextHalf = (((59 - now.getMinutes()) % 30 + 1) * 60 - now.getSeconds()) * 1000;
    pad.textContent = messages[key];
    setTimeout(showMessage, nextHalf);
}());

但是，此變體的演示並沒有加速。