Question

我正在尝试创建一个基于星期几更改内容的动态页面。我以为我有解决方案，但我似乎无法使其发挥作用：

<html>
<head>
<script type="text/javascript">
function showhide(id) {
    var d = new Date();
    var s = document.getElementById[d.getDay()];
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';

}
</script>
</head>
<body onload="javascript:showhide[d.getDay()]">
<div id="0" style="display:none;">
     <h3>Sunday</h3>

</div>
<div id="1" style="display:none;">
     <h3>Monday</h3>

</div>
<div id="2" style="display:none">
     <h3>Tuesday</h3>

</div>
<div id="3" style="display:none">
     <h3>Wednesday</h3>

</div>
<div id="4" style="display:none">
     <h3>Thursday</h3>

</div>
<div id="5" style="display:none">
     <h3>Friday</h3>

</div>
<div id="6" style="display:none">
     <h3>Saturday</h3>

</div>
</body>
</html>

我怀疑它要么是非常简单的事情，而是我过度思考它，或者它是我尚未掌握的东西。任何帮助我指向正确方向的人都将不胜感激。

到目前为止，我的资料来源是w3schools，jsfiddle和这里（我在这里从另一篇文章中借了一段我的代码）。

提前感谢您的回复。

Answer 1

您的代码有两个问题。

第一个问题，似乎你正在混淆 [] 和（）

[] 用于访问数组中的元素或对象中的属性
（）用于调用函数

第二个问题，你试图在HTML中使用d变量，即使它只在你的showhide函数中可用（在函数内声明的变量只能在这个函数中使用它＆＃＆＃ 39;孩子们。）

因此要修复您的代码：

将document.getElementById[d.getDay()];替换为document.getElementById(d.getDay());

并在您的HTML中将<body onload="javascript:showhide[d.getDay()]">替换为<body onload="showhide()">

最后，根据您想要实现的目标，您应该考虑是否真的需要为每天创建DOM元素，或者您是否只能注入所需的数据，如下所示：

<html>
  <head>
    <script type="text/javascript">
      function injectDay() {
        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
          'Friday', 'Saturday'];
        var date = new Date();

        document.querySelector('.dayContainer').innerHTML = days[date.getDay()];
      }
    </script>
  </head>
  <body onload="injectDay()">
    <div>
      <h3 class="dayContainer"></h3>
    </div>
  </body>
</html>

Answer 2

几乎在那里，将document.getElementById []更改为document.getElementById（）＆amp;将脚本添加到页面底部（标记下方和''标记之前），您可以删除body onload事件，只需调用以下函数：

...
<div id="6" style="display:none">
   <h3>Saturday</h3>

</div>
<script>
  function showhide() {
    var d = new Date();
    var s = document.getElementById(+d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
  }
  showhide();
</script>
</body>
</html>

请参阅http://jsfiddle.net/sjmcpherso/wyoffLw6/

通过调用页面底部的函数（在标记之后），当页面上的所有元素都已加载时，您将有效地触发该函数

Answer 3

function myDay() {
        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        var date = new Date();
        document.querySelector('.dayname').innerHTML = days[date.getDay()];

        if(date.getDay()%2!=0){
             document.querySelector('.dayname2').innerHTML = days[date.getDay()-1];
             document.querySelector('.dayname3').innerHTML = days[date.getDay()+1];
            document.querySelector('.dayname').innerHTML = ""; //same hide
       }else{
             document.querySelector('.dayname').innerHTML = days[date.getDay()];
              document.querySelector('.dayname2').innerHTML = days[date.getDay()-2];
             document.querySelector('.dayname3').innerHTML = days[date.getDay()+2];  
       } 
      }

<html>
  <head>
  </head>
  <body onload="myDay()">  
       <table>
         <tr>
             <td class="dayname2" id ="AA">
             </td>
             <td class="dayname">
             </td>
             <td class="dayname3">
             </td>
         </tr>
      </table>        
  </body>
</html>

Javascript根据星期几隐藏/显示div？

3 个答案: