Fatal编程技术网
  • javascript/
  • 如何使用Javascript关注日历上的特定日期

如何使用Javascript关注日历上的特定日期

javascript html arrays calendar

如何使用Javascript关注日历上的特定日期,javascript,html,arrays,calendar,html-table,Javascript,Html,Arrays,Calendar,Html Table,我最近用html和CSS制作了自己的日历，现在我想让日历可以从下拉列表中选择一天和一个月，所以当我选择一个日期时，它会关注这一天并改变它的颜色 我已经用Javascript编写了一些代码，但问题是Javascript需要很多行，有人知道更简单的方法吗 JS代码： function selectDay() { var day = document.getElementById("day"); var month = document.

我最近用html和CSS制作了自己的日历，现在我想让日历可以从下拉列表中选择一天和一个月，所以当我选择一个日期时，它会关注这一天并改变它的颜色

我已经用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>
为每个表格单元格（仅代表日期的单元格）指定一个单独的id-它们不能以数字开头，因此我建议先使用m，然后使用月数d，然后使用日数-例如2月5日的id='m2d5'

然后，您可以使用每个SELECT元素的值来创建id并使用：

 var dayid = "m"+month.value+"d"+day.value;
 document.getElementById('dayid').className = 'lit'
如果只想突出显示一个单元格，则必须跟踪上次照亮的单元格的id，或者使用类似的方法

var reset = document.getElementsByClassName("lit");
while (reset.length) { reset[0].className = "normal"; }
要查找并重置任何点亮的灯..

您好，谢谢您的评论，但是它仍然不起作用，我不知道您所说的类名和dayid是什么意思，请您更具体一点。我可能听起来很愚蠢，但我只是javascript的初学者，并不真正理解你说的一切。再次感谢className引用了一种CSS样式-您目前只为表设置了一个，但为了测试，请在CSS代码中添加类似.lit{background color:#ff0000；}（包括lit之前的点）的内容。然后Javascript设置为类“lit”的任何内容的背景都将设置为红色。非常感谢，我还有一个问题。当ik选择一个日期时，我在控制台上得到一个错误“UncaughtTypeError:无法将属性'className'设置为null”。ans这是我的JS代码：函数selectDay（）{var dayid=“d”+day.value+“m”+month.value；document.getElementById（dayid）.className='lit'；}document.getElementById（dayid）.className='lit'；和document.getElementById（'dayid'）.className='lit'；两者都不起作用，但您是否为所有相关TD元素提供了相应的id？您不希望dayid周围有引号-它是一个变量。 
var reset = document.getElementsByClassName("lit");
while (reset.length) { reset[0].className = "normal"; }