Question

尝试在我的网站标题上显示一条消息，该消息应根据日期更改每日。使用下面的脚本但似乎没有调用var。因为它没有显示任何内容，我不知道哪一个错过了。

<script type="function/javascritp">
function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}

switch((new Date()).getDay()) {
    case 0:
        // Sunday
        unhide('sun');
        break;
    case 1:
        // Monday
        unhide('mon');
        break;
    case 2:
        // Tuesday
        unhide('tues');
        break;
    case 3:
        // Wednesday
        unhide('wed');
        break;
    case 4:
        // Thursday
        unhide('thurs');
        break;
    case 5:
        // Friday
        unhide('fri');
        break;
    case 6:
        // Saturday
        unhide('sat');
        break;
};
</script>
</head>

<body>

<Header>
<div id="sun" class="hidden">Today is Sunday</div>
<div id="mon" class="hidden">Today is Monday</div>
<div id="tues" class="hidden">Today is Tuesday</div>
<div id="wed" class="hidden">Today is Wednesday</div>
<div id="thurs" class="hidden">Today is Thursday</div>
<div id="fri" class="hidden">Today is Friday</div>
<div id="sat" class="hidden">Today is Saturday</div>
</header>
</body>

我正在使用css代码，

.hidden {
    display: none;
}

Answer 1

CSS中必须.hidden而不是hidden;你忘记添加一段时间.，休息一切看起来不错

function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}

switch((new Date()).getDay()) {
    case 0:
        // Sunday
        unhide('sun');
        break;
    case 1:
        // Monday
        unhide('mon');
        break;
    case 2:
        // Tuesday
        unhide('tues');
        break;
    case 3:
        // Wednesday
        unhide('wed');
        break;
    case 4:
        // Thursday
        unhide('thurs');
        break;
    case 5:
        // Friday
        unhide('fri');
        break;
    case 6:
        // Saturday
        unhide('sat');
        break;
};

.hidden{display:none}

<Header>
<div id="sun" class="hidden">Today is Sunday</div>
<div id="mon" class="hidden">Today is Monday</div>
<div id="tues" class="hidden">Today is Tuesday</div>
<div id="wed" class="hidden">Today is Wednesday</div>
<div id="thurs" class="hidden">Today is Thursday</div>
<div id="fri" class="hidden">Today is Friday</div>
<div id="sat" class="hidden">Today is Saturday</div>
</Header>

Answer 2

对于初学者来说语法很重要：脚本声明type="function/javascritp"应为type="text/javascript"。不确定不同的浏览器如何处理未知的脚本类型，但很可能根本不执行代码。

使用getElementById时出现“问题”。如果在加载DOM之前使用它，则可能不存在相关元素，并且getElementById将返回null。在示例中，脚本似乎位于head部分，这肯定是一个问题。为防止这种情况，您可以在window.onload事件中调用取消隐藏功能。（更完整的信息here）

在这个例子中，将开关盒更改为一个阵列以获得更好的概述，但原则保持不变：

<script type="text/javascript">    
function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}

window.onload = function(){
    var day = (new Date()).getDay();       
    var days = ['sun','mon', 'tues', 'wed', 'thurs','fri', 'sat'];
    unhide(days[day]);
};
</script>

注意，尽管在卸载之前声明了取消隐藏功能，但在onload事件期间使用它之前不会调用它。所以当时也会调用getElementById。

Answer 3

在您的情况下，这是最容易实施的。

function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.classList.remove('hidden');
}

Javascript函数取消隐藏元素似乎没有调用var

3 个答案: