Как сфокусироваться на конкретный день на календаре с Javascript

Недавно я создал свой собственный календарь с помощью html и CSS, теперь я хочу, чтобы календарь имел возможность выбирать день и месяц из выпадающего списка, поэтому, когда я выбираю дату, когда он будет сфокусирован на дне и изменит его цветКак сфокусироваться на конкретный день на календаре с Javascript

Я проделал некоторую кодировку с помощью Javascript, но проблема в том, что для Javascript требуется много строк, любой знает более простой способ?

JS код:

 function selectDay() { 
      var day = document.getElementById("day"); 
      var month = document.getElementById("month"); 
      var type = document.getElementById("type"); 
      var selectedValueday = day.options[day.selectedIndex].value; 
      var selectedValuemonth = month.options[month.selectedIndex].value; 
      var selectedValuetype = type.options[type.selectedIndex].value; 


      if ((selectedValueday === "01") && (selectedValuemonth === "01") && (selectedValuetype === "01")) { 
       document.getElementById('jan1').style.backgroundColor = 'purple'; 
      } else if((selectedValueday === "01") && (selectedValuemonth === "01") && (selectedValuetype === "02")){ 
       document.getElementById('jan1').style.backgroundColor = 'yellow'; 
      }else{ 
       document.getElementById('jan1').style.backgroundColor = 'white'; 
      } 
      if ((selectedValueday === "02") && (selectedValuemonth === "01") && (selectedValuetype === "01")) { 
       document.getElementById('jan2').style.backgroundColor = 'purple'; 
      } else if((selectedValueday === "02") && (selectedValuemonth === "01") && (selectedValuetype === "02")){ 
       document.getElementById('jan2').style.backgroundColor = 'yellow'; 
      }else{ 
       document.getElementById('jan2').style.backgroundColor = 'white'; 
      } 
     }

HTML код:

<select id="day"> 
     <option>Kies een dag</option> 
     <option value="01">01</option> 
     <option value="02">02</option> 
     <option value="03">03</option> 
     <option value="04">04</option> 
     <option value="05">05</option> 
     <option value="06">06</option> 
     <option value="07">07</option> 
     <option value="08">08</option> 
     <option value="09">09</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> 
    </select> 
    <select id="month"> 
     <option>Kies een maand</option> 
     <option value="01">01</option> 
     <option value="02">02</option> 
     <option value="03">03</option> 
     <option value="04">04</option> 
     <option value="05">05</option> 
     <option value="06">06</option> 
     <option value="07">07</option> 
     <option value="08">08</option> 
     <option value="09">09</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
    </select> 
    <select id="type"> 
     <option>Kies een type</option> 
     <option value="01">Feestdag</option> 
     <option value="02">Verjaardag</option> 
    </select> 

    <button onclick="selectDay();">Zoek</button> 

     <h1 align='center'>Jaarkalender 2013</h1> 
     <table align='center' width = '1600' border = '0'> 
      <tr> 
       <td ALIGN="center"><B>Januari</B> 
        <table height = '175' border = '0'> 
         <tr> 
          <TD bgcolor='B9B1B1'><b><b>Maandag</b></b><FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Dinsdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>   
          <TD bgcolor='B9B1B1'><b>Woensdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Donderdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Vrijdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Zaterdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Zondag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
         </tr> 
         <TR> 
          <TD><font color="#888888">30</font></TD> 
          <TD id="jan1" title = 'Nieuwjaar'><font color = '#FF0000'><B>1</B></TD> 
          <TD id="jan2">2</TD> 
          <TD>3</TD> 
          <TD>4</TD> 
          <TD bgcolor='#00FFFF'>5</TD> 
          <TD bgcolor='#00FFFF'>6</TD> 
         </TR> 
         <TR> 
          <TD>7</TD> 
          <TD>8</TD> 
          <TD>9</TD> 
          <TD>10</TD> 
          <TD>11</TD> 
          <TD bgcolor='#00FFFF'>12</TD> 
          <TD bgcolor='#00FFFF'>13</TD> 
         </TR> 
         <TR> 
          <TD>14</TD> 
          <TD>15</TD> 
          <TD>16</TD> 
          <TD>17</TD> 
          <TD>18</TD> 
          <TD bgcolor='#00FFFF'>19</TD> 
          <TD bgcolor='#00FFFF'>20</TD> 
         </TR> 
         <TR> 
          <TD>21</TD> 
          <TD>22</TD> 
          <TD>23</TD> 
          <TD>24</TD> 
          <TD>25</TD> 
          <TD bgcolor='#00FFFF'>26</TD> 
          <TD bgcolor='#00FFFF'>27</TD> 
         </TR> 
         <TR> 
          <TD>28</TD> 
          <TD>29</TD> 
          <TD>30</TD> 
          <TD>31</TD> 
          <TD><font color="#888888">1</font></TD> 
          <TD bgcolor='#00FFFF'><font color="#888888">2</font></TD> 
          <TD bgcolor='#00FFFF'><font color="#888888">3</font></TD> 
         </TR> 
         <TR> 
          <TD></TD> 
          <TD></TD> 
          <TD></TD> 
          <TD></TD> 
          <TD></TD> 
          <TD bgcolor='#00FFFF'></TD> 
          <TD bgcolor='#00FFFF'></TD> 
         </TR> 
        </table> 
       </TD> 

       <td ALIGN="center"><B>Februari</B> 
        <table border = '0' height = '175'> 
         <tr> 
          <TD bgcolor='B9B1B1'><b><b>Maandag</b></b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Dinsdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>   
          <TD bgcolor='B9B1B1'><b>Woensdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Donderdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Vrijdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Zaterdag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
          <TD bgcolor='B9B1B1'><b>Zondag</b> <FONT COLOR="B9B1B1">.</FONT></TD> 
         </tr> 
         <TR> 
          <TD><font color="#888888">28</font></TD> 
          <TD><font color="#888888">29</font></TD> 
          <TD><font color="#888888">30</font></TD> 
          <TD><font color="#888888">31</font></TD> 
          <TD>1</TD> 
          <TD bgcolor='#00FFFF'>2</TD> 
          <TD bgcolor='#00FFFF'>3</TD> 
         </TR> 
         <TR> 
          <TD>4</TD> 
          <TD>5</TD> 
          <TD>6</TD> 
          <TD>7</TD> 
          <TD>8</TD> 
          <TD bgcolor='#00FFFF'>9</TD> 
          <TD bgcolor='#00FFFF'>10</TD> 
         </TR> 
         <TR> 
          <TD>11</TD> 
          <TD>12</TD> 
          <TD>13</TD> 
          <TD>14</TD> 
          <TD>15</TD> 
          <TD bgcolor='#00FFFF'>16</TD> 
          <TD bgcolor='#00FFFF'>17</TD> 
         </TR> 
         <TR> 
          <TD>18</TD> 
          <TD>19</TD> 
          <TD>20</TD> 
          <TD>21</TD> 
          <TD>22</TD> 
          <TD bgcolor='#00FFFF'>23</TD> 
          <TD bgcolor='#00FFFF'>24</TD> 
         </TR> 
         <TR> 
          <TD>25</TD> 
          <TD>26</TD> 
          <TD>27</TD> 
          <TD>28</TD> 
          <TD><font color="#888888">1</font></TD> 
          <TD bgcolor='#00FFFF'><font color="#888888">2</font></TD> 
          <TD bgcolor='#00FFFF'><font color="#888888">3</font></TD> 
         </TR> 
        </table> 
       </TD> 
     </table>

CSS код:

 table{ 

      left: -200px; 
      border-collapse:collapse; 
      border:1px solid black; 
     }

источник

2013-11-12 user2959870

Дайте каждому из ячеек таблицы (те, представляющие даты только) индивидуальный идентификатор - они не могут начать с числа, поэтому я предлагаю использовать m, затем номер месяца d, а затем номер дня - например id = 'm2d5' для 5 февраля у.

Затем вы можете использовать значение каждого из элементов SELECT, чтобы создать идентификатор и использование:

var dayid = "m"+month.value+"d"+day.value; 
document.getElementById('dayid').className = 'lit'

Если вы хотите только одна ячейка выделена вам либо придется отслеживать идентификатор клетка вы в последний раз зажег или использовать что-то вроде

var reset = document.getElementsByClassName("lit"); 
while (reset.length) { reset[0].className = "normal"; }

Чтобы найти и вернуть все зажгли те ..

источник

2013-11-12 13:12:49 WindsorAndy

привет спасибо за ваш комментарий, hoewer он еще не работал, я не знаю, что ты меня по названиям классов и dayid, не могли бы вы быть немного более конкретными. Я могу показаться глупым, но им просто новичок в javascript и не понимаю, что вы сказали. еще раз спасибо – user2959870

КлассName ссылается на стиль CSS - в данный момент у вас есть только одна настройка для таблицы, но для тестирования добавьте что-то вроде .lit {background-color: # ff0000; } (включая точку перед освещением) в ваш код CSS. Тогда все, что Javascript устанавливает в класс «горит», будет иметь свой фон, установленный в красный цвет. – WindsorAndy

спасибо большое У меня все еще есть еще одна проблема. когда ik выбирает дату, я получаю сообщение об ошибке на консольном «Uncaught TypeError: Не могу установить свойство« className »из null». ans это мой код JS: функция selectDay() { var dayid = "d" + day.value + "m" + month.value; document.getElementById (dayid) .className = 'lit'; } – user2959870

Как сфокусироваться на конкретный день на календаре с Javascript

ответ

Смежные вопросы