Question

在我们的网站上，我提到开放时间。我们在6天开放，但从10月到3月，我们在星期二休息。我希望这张照片在10月到3月的桌子下以开放时间显示。我设法做到了这一点，但我使用document.write和一些javascript。根据我的阅读，在我的情况下，inner.html会更快。但我无法设法使用document.write。我也没有设法获得更精简的代码。

这就是我目前所拥有的：

                    <h3>Openingstijden</h3>
                <table>
                    <tr><td>Maandag:</td><td>9:00-18:00</td></tr>
                    <tr><td>Dinsdag:</td><td>9:00-18:00</td></tr>
                    <tr><td>Woensdag:</td><td>9:00-18:00</td></tr>
                    <tr><td>Donderdag:</td><td>9:00-18:00</td></tr>
                    <tr><td>Vrijdag:</td><td>9:00-18:00</td></tr>
                    <tr><td>Zaterdag:</td><td>9:00-17:00</td></tr>
                </table>
                <p id="dinsdag">Van 1 oktober t/m 31 maart dinsdags gesloten</p>
                <script type="text/javascript">
                    var d=new Date();
                    var month=new Array();
                    month[0]="<font color=\"#a60000\">Van 1 oktober t/m 31 maart dinsdags gesloten.<\/font>";
                    month[1]="<font color=\"#a60000\">Van 1 oktober t/m 31 maart dinsdags gesloten.<\/font>";
                    month[2]="<font color=\"#a60000\">Van 1 oktober t/m 31 maart dinsdags gesloten.<\/font>";
                    month[3]="Van 1 oktober t/m 31 maart dinsdags gesloten.";
                    month[4]="Van 1 oktober t/m 31 maart dinsdags gesloten.";
                    month[5]="Van 1 oktober t/m 31 maart dinsdags gesloten.";
                    month[6]="Van 1 oktober t/m 31 maart dinsdags gesloten.";
                    month[7]="Van 1 oktober t/m 31 maart dinsdags gesloten.";
                    month[8]="Van 1 oktober t/m 31 maart dinsdags gesloten.";
                    month[9]="<font color=\"#a60000\">Van 1 oktober t/m 31 maart dinsdags gesloten.<\/font>";
                    month[10]="<font color=\"#a60000\">Van 1 oktober t/m 31 maart dinsdags gesloten.<\/font>";
                    month[11]="<font color=\"#a60000\">Van 1 oktober t/m 31 maart dinsdags gesloten.<\/font>";
                    var n = month[d.getMonth()];
                    document.write(n);
                </script>

我试图将句子放入文本

并使用inner.html来改变颜色，但我无法真正改变句子。我已经搜索了很多教程，但我的javascript知识还没有限制将某些内容转换为我需要的内容。我现在花了大约1.5整天的时间来做这件事。但我确实想学习，而且我不是要求已经完成的完整脚本。

Answer 1

这是你想要的吗？我对所有行进行了更改。

http://jsfiddle.net/razorcd/tdL7x/1/

            <h3>Openingstijden</h3>
            <table>
                <tr><td>Maandag:</td><td>9:00-18:00</td></tr>
                <tr><td>Dinsdag:</td><td>9:00-18:00</td></tr>
                <tr><td>Woensdag:</td><td>9:00-18:00</td></tr>
                <tr><td>Donderdag:</td><td>9:00-18:00</td></tr>
                <tr><td>Vrijdag:</td><td>9:00-18:00</td></tr>
                <tr><td>Zaterdag:</td><td>9:00-17:00</td></tr>
            </table>
            <div id="dinsdag">Van 1 oktober t/m 31 maart dinsdags gesloten</div>


                var d=new Date();
                var month=new Array();
                month[0]='<p style="color:#a60000">Van 1 oktober t/m 31 maart dinsdags gesloten.</p>';
                month[1]='<p style="color:#a60000">Van 1 oktober t/m 31 maart dinsdags gesloten.</p>';
                month[2]='<p style="color:#a60000">Van 1 oktober t/m 31 maart dinsdags gesloten.</p>';
                month[3]="<p>Van 1 oktober t/m 31 maart dinsdags gesloten.</p>";
                month[4]="<p>Van 1 oktober t/m 31 maart dinsdags gesloten.</p>";
                month[5]="<p>Van 1 oktober t/m 31 maart dinsdags gesloten.</p>";
                month[6]="<p>Van 1 oktober t/m 31 maart dinsdags gesloten.</p>";
                month[7]="<p>Van 1 oktober t/m 31 maart dinsdags gesloten.</p>";
                month[8]="<p>Van 1 oktober t/m 31 maart dinsdags gesloten.</p>";
                month[9]='<p style="color:#a60000">Van 1 oktober t/m 31 maart dinsdags gesloten.</p>';
                month[10]='<p style="color:#a60000">Van 1 oktober t/m 31 maart dinsdags gesloten.</p>';
                month[11]='<p style="color:#a60000">Van 1 oktober t/m 31 maart dinsdags gesloten.</p>';
                var n = month[d.getMonth()];
                //document.write(n);

                //new lines
                var lastLine = document.getElementById("dinsdag");   //this will select the html element id="dinstag"
                lastLine.style.color="red";             //this will change the text color of the element

                lastLine.innerHTML = "";        //this will clean everything in <div id="dinsdag">
                for (var i=0; i<month.length-1;i++){
                    lastLine.innerHTML += month[i];      //this will add new paragraph inside the p
                }

这只会使您的<p id="dinstag">红色：

               //new lines
                var lastLine = document.getElementById("dinsdag");   //this will select the html element id="dinstag"
                lastLine.style.color="red";             //this will change the text color of the element

这是有效的，但有更实际的解决方案来做到这一点。您只在HTML中编写文本，然后仅使用CSS更改颜色。如果你愿意，我可以举个例子。

Answer 2

如果我理解正确的话，你会尝试打印一个适用于当月的句子，如果适用，则将其涂成红色，如果不适用，则涂成常色。

如果您使用该元素。

<div id="dinsdag">Van 1 oktober t/m 31 maart dinsdags gesloten</div>

您可以使用以下JavaScript命令更改文本：

document.getElementById("dinstag").textContent = "New Text";

或者要更改文本的颜色，您可以这样做：

document.getElementById("dinstag").style.color = "#a60000";

你也可以使用CSS classes来创建不同的文字样式/颜色，我通常建议使用它而不是使用字体标记或内嵌样式。

对于条件部分，要决定是否用红色书写，您可以执行以下操作：

if (currentMonth >= 9 || currentMonth <=2) {
    // change text and/or colour of element...
}

在<javascript </p>中根据月份改变颜色<p>

2 个答案: