Question

我遇到以下代码时遇到问题，总是希望加载2月而不是当月的页面。我没有看到任何问题，但希望有更好的javascript眼睛的人可以提供帮助。

基本上代码非常简单。在页面加载获取当前月份然后将该月份.htm加载到一个帧中。十分简单。提前感谢您的帮助。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="refresh" content="60" />
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    
    li {
      float: left;
      font-family: tahoma;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #111;
    }
    
    #title {
      background-color: #333;
      border-right: 1px black dotted;
    }
    
    iframe {
      width: 100%;
      height: 1200px;
    }
  </style>

  <script type="text/javascript">
    window.onload = function() {
      function cMonth() {
        var d = new Date();
        var q = d.getMonth();
      }

      function jan() {
        document.querySelector(".sched").setAttribute("src", "jan.htm")
      }

      function feb() {
        document.querySelector(".sched").setAttribute("src", "feb.htm")
      }

      function mar() {
        document.querySelector(".sched").setAttribute("src", "mar.htm")
      }

      function apr() {
        document.querySelector(".sched").setAttribute("src", "apr.htm")
      }

      function may() {
        document.querySelector(".sched").setAttribute("src", "may.htm")
      }

      function jun() {
        document.querySelector(".sched").setAttribute("src", "jun.htm")
      }

      function jul() {
        document.querySelector(".sched").setAttribute("src", "jul.htm")
      }

      function aug() {
        document.querySelector(".sched").setAttribute("src", "aug.htm")
      }

      function sep() {
        document.querySelector(".sched").setAttribute("src", "sep.htm")
      }

      function oct() {
        document.querySelector(".sched").setAttribute("src", "oct.htm")
      }

      function nov() {
        document.querySelector(".sched").setAttribute("src", "nov.htm")
      }

      function dec() {
        document.querySelector(".sched").setAttribute("src", "dec.htm")
      }

      document.getElementsByTagName("a")[1].onclick = jan;
      document.getElementsByTagName("a")[2].onclick = feb;
      document.getElementsByTagName("a")[3].onclick = mar;
      document.getElementsByTagName("a")[4].onclick = apr;
      document.getElementsByTagName("a")[5].onclick = may;
      document.getElementsByTagName("a")[6].onclick = jun;
      document.getElementsByTagName("a")[7].onclick = jul;
      document.getElementsByTagName("a")[8].onclick = aug;
      document.getElementsByTagName("a")[9].onclick = sep;
      document.getElementsByTagName("a")[10].onclick = oct;
      document.getElementsByTagName("a")[11].onclick = nov;
      document.getElementsByTagName("a")[12].onclick = dec;

      if (q = 0) {
        document.getElementById('january').click() = jan;
      } else if (q = 1) {
        document.getElementById('february').click() = feb;
      } else if (q = 2) {
        document.getElementById('march').click() = mar;
      } else if (q = 3) {
        document.getElementById('april').click() = apr;
      } else if (q = 4) {
        document.getElementById('may').click() = may;
      } else if (q = 5) {
        document.getElementById('june').click() = jun;
      } else if (q = 6) {
        document.getElementById('july').click() = jul;
      } else if (q = 7) {
        document.getElementById('august').click() = aug;
      } else if (q = 8) {
        document.getElementById('september').click() = sep;
      } else if (q = 9) {
        document.getElementById('october').click() = oct;
      } else if (q = 10) {
        document.getElementById('november').click() = nov;
      } else if (q = 11) {
        document.getElementById('december').click() = dec;
      }
    }
  </script>
</head>

<body>
  <ul>
    <li><a id="january" href="#" onclick="jan()">January</a></li>
    <li><a id="february" href="#" onclick="feb()">February</a></li>
    <li><a id="march" href="#" onclick="mar()">March</a></li>
    <li><a id="april" href="#" onclick="apr()">April</a></li>
    <li><a id="may" href="#" onclick="may()">May</a></li>
    <li><a id="june" href="#" onclick="jun()">June</a></li>
    <li><a id="july" href="#" onclick="jul()">July</a></li>
    <li><a id="august" href="#" onclick="aug()">August</a></li>
    <li><a id="september" href="#" onclick="sep()">September</a></li>
    <li><a id="october" href="#" onclick="oct()">October</a></li>
    <li><a id="november" href="#" onclick="nov()">November</a></li>
    <li><a id="december" href="#" onclick="dec()">December</a></li>
  </ul>
  <iframe sandbox="" allowfullscreen frameborder="0" class="sched"></iframe>
</body>

</html>

Answer 1

第一个错误

将比较用作==而不是=。

第二个错误

var d = new Date();var q = d.getMonth();在函数内部使用但从未调用过。

第三个错误

Array index为zero based，因此请从0开始11

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="refresh" content="60" />
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    
    li {
      float: left;
      font-family: tahoma;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #111;
    }
    
    #title {
      background-color: #333;
      border-right: 1px black dotted;
    }
    
    iframe {
      width: 100%;
      height: 1200px;
    }
  </style>

  <script type="text/javascript">
    window.onload = function() {
      var d = new Date();
      var q = d.getMonth();

      function jan() {
        document.querySelector(".sched").setAttribute("src", "jan.htm")
      }

      function feb() {
        document.querySelector(".sched").setAttribute("src", "feb.htm")
      }

      function mar() {
        document.querySelector(".sched").setAttribute("src", "mar.htm")
      }

      function apr() {
        document.querySelector(".sched").setAttribute("src", "apr.htm")
      }

      function may() {
        document.querySelector(".sched").setAttribute("src", "may.htm")
      }

      function jun() {
        document.querySelector(".sched").setAttribute("src", "jun.htm")
      }

      function jul() {
        document.querySelector(".sched").setAttribute("src", "jul.htm")
      }

      function aug() {
        document.querySelector(".sched").setAttribute("src", "aug.htm")
      }

      function sep() {
        document.querySelector(".sched").setAttribute("src", "sep.htm")
      }

      function oct() {
        document.querySelector(".sched").setAttribute("src", "oct.htm")
      }

      function nov() {
        document.querySelector(".sched").setAttribute("src", "nov.htm")
      }

      function dec() {
        document.querySelector(".sched").setAttribute("src", "dec.htm")
      }

      document.getElementsByTagName("a")[0].onclick = jan;
      document.getElementsByTagName("a")[1].onclick = feb;
      document.getElementsByTagName("a")[2].onclick = mar;
      document.getElementsByTagName("a")[3].onclick = apr;
      document.getElementsByTagName("a")[4].onclick = may;
      document.getElementsByTagName("a")[5].onclick = jun;
      document.getElementsByTagName("a")[6].onclick = jul;
      document.getElementsByTagName("a")[7].onclick = aug;
      document.getElementsByTagName("a")[8].onclick = sep;
      document.getElementsByTagName("a")[9].onclick = oct;
      document.getElementsByTagName("a")[10].onclick = nov;
      document.getElementsByTagName("a")[11].onclick = dec;
      debugger;
      if (q == 0) {
        document.getElementById('january').click() = jan;
      } else if (q == 1) {
        document.getElementById('february').click() = feb;
      } else if (q == 2) {
        document.getElementById('march').click() = mar;
      } else if (q == 3) {
        document.getElementById('april').click() = apr;
      } else if (q == 4) {
        document.getElementById('may').click() = may;
      } else if (q == 5) {
        document.getElementById('june').click() = jun;
      } else if (q == 6) {
        document.getElementById('july').click() = jul;
      } else if (q == 7) {
        document.getElementById('august').click() = aug;
      } else if (q == 8) {
        document.getElementById('september').click() = sep;
      } else if (q == 9) {
        document.getElementById('october').click() = oct;
      } else if (q == 10) {
        document.getElementById('november').click() = nov;
      } else if (q == 11) {
        document.getElementById('december').click() = dec;
      }
    }
  </script>
</head>

<body>
  <ul>
    <li><a id="january" href="#" onclick="jan()">January</a></li>
    <li><a id="february" href="#" onclick="feb()">February</a></li>
    <li><a id="march" href="#" onclick="mar()">March</a></li>
    <li><a id="april" href="#" onclick="apr()">April</a></li>
    <li><a id="may" href="#" onclick="may()">May</a></li>
    <li><a id="june" href="#" onclick="jun()">June</a></li>
    <li><a id="july" href="#" onclick="jul()">July</a></li>
    <li><a id="august" href="#" onclick="aug()">August</a></li>
    <li><a id="september" href="#" onclick="sep()">September</a></li>
    <li><a id="october" href="#" onclick="oct()">October</a></li>
    <li><a id="november" href="#" onclick="nov()">November</a></li>
    <li><a id="december" href="#" onclick="dec()">December</a></li>
  </ul>
  <iframe sandbox="" allowfullscreen frameborder="0" class="sched"></iframe>
</body>

</html>

＆＃13;

Answer 2

以下代码按预期工作。它将显示当月的页面。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="refresh" content="60" />
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
      font-family: tahoma;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover {
      background-color: #111;
    }

    #title {
      background-color: #333;
      border-right: 1px black dotted;
    }

    iframe {
      width: 100%;
      height: 1200px;
    }
  </style>

  <script type="text/javascript">
    window.onload = function() {      
        var d = new Date();
        var q = d.getMonth();

        if (q == 0) {
            document.getElementById('january').click();
        } else if (q == 1) {
            document.getElementById('february').click();
        } else if (q == 2) {
            document.getElementById('march').click();
        } else if (q == 3) {
            document.getElementById('april').click();
        } else if (q == 4) {
            document.getElementById('may').click();
        } else if (q == 5) {
            document.getElementById('june').click();
        } else if (q == 6) {
            document.getElementById('july').click();
        } else if (q == 7) {
            document.getElementById('august').click();
        } else if (q == 8) {
            document.getElementById('september').click();
        } else if (q == 9) {
            document.getElementById('october').click();
        } else if (q == 10) {
            document.getElementById('november').click();
        } else if (q == 11) {
            document.getElementById('december').click();
        }
    };  

    function jan() {
        document.querySelector(".sched").setAttribute("src", "jan.htm")
    }

    function feb() {
        document.querySelector(".sched").setAttribute("src", "feb.htm")
    }

    function mar() {
        document.querySelector(".sched").setAttribute("src", "mar.htm")
    }

    function apr() {
        document.querySelector(".sched").setAttribute("src", "apr.htm")
    }

    function may() {
        document.querySelector(".sched").setAttribute("src", "may.htm")
    }

    function jun() {
        document.querySelector(".sched").setAttribute("src", "jun.htm")
    }

    function jul() {
        document.querySelector(".sched").setAttribute("src", "jul.htm")
    }

    function aug() {
        document.querySelector(".sched").setAttribute("src", "aug.htm")
    }

    function sep() {
        document.querySelector(".sched").setAttribute("src", "sep.htm")
    }

    function oct() {
        document.querySelector(".sched").setAttribute("src", "oct.htm")
    }

    function nov() {
        document.querySelector(".sched").setAttribute("src", "nov.htm")
    }

    function dec() {
        document.querySelector(".sched").setAttribute("src", "dec.htm")
    }          
  </script>
</head>
<body>
  <ul>
    <li><a id="january" href="#" onclick="jan()">January</a></li>
    <li><a id="february" href="#" onclick="feb()">February</a></li>
    <li><a id="march" href="#" onclick="mar()">March</a></li>
    <li><a id="april" href="#" onclick="apr()">April</a></li>
    <li><a id="may" href="#" onclick="may()">May</a></li>
    <li><a id="june" href="#" onclick="jun()">June</a></li>
    <li><a id="july" href="#" onclick="jul()">July</a></li>
    <li><a id="august" href="#" onclick="aug()">August</a></li>
    <li><a id="september" href="#" onclick="sep()">September</a></li>
    <li><a id="october" href="#" onclick="oct()">October</a></li>
    <li><a id="november" href="#" onclick="nov()">November</a></li>
    <li><a id="december" href="#" onclick="dec()">December</a></li>
  </ul>
  <iframe sandbox="" allowfullscreen frameborder="0" class="sched"></iframe>
</body>

</html>

代码更改

删除了以下代码，因为它们过度杀伤。每个锚标签上的onclick属性就足够了。
在if条件下使用==而不是=。
从以下内容中删除“= jan”，并对其余相同代码执行相同操作。

document.getElementById（'january'）。click（）= jan;
修改了window.onload中的代码。

Answer 3

首先，感谢所有人的快速反应。你们总是很棒！

我的原始代码看起来有些问题。以下是Nawed Khan，Yogen Darji，kevinSpacey和visualjoel的正确片段！

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="refresh" content="60" />
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    
    li {
      float: left;
      font-family: tahoma;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #111;
    }
    
    #title {
      background-color: #333;
      border-right: 1px black dotted;
    }
    
    iframe {
      width: 100%;
      height: 1200px;
    }
  </style>

  <script type="text/javascript">
    window.onload = function() {
      var d = new Date();
      var q = d.getMonth();

      if (q == 0) {
        document.getElementById('january').click();
      } else if (q == 1) {
        document.getElementById('february').click();
      } else if (q == 2) {
        document.getElementById('march').click();
      } else if (q == 3) {
        document.getElementById('april').click();
      } else if (q == 4) {
        document.getElementById('may').click();
      } else if (q == 5) {
        document.getElementById('june').click();
      } else if (q == 6) {
        document.getElementById('july').click();
      } else if (q == 7) {
        document.getElementById('august').click();
      } else if (q == 8) {
        document.getElementById('september').click();
      } else if (q == 9) {
        document.getElementById('october').click();
      } else if (q == 10) {
        document.getElementById('november').click();
      } else if (q == 11) {
        document.getElementById('december').click();
      }
    };

    function jan() {
      document.querySelector(".sched").setAttribute("src", "jan.htm")
    }

    function feb() {
      document.querySelector(".sched").setAttribute("src", "feb.htm")
    }

    function mar() {
      document.querySelector(".sched").setAttribute("src", "mar.htm")
    }

    function apr() {
      document.querySelector(".sched").setAttribute("src", "apr.htm")
    }

    function may() {
      document.querySelector(".sched").setAttribute("src", "may.htm")
    }

    function jun() {
      document.querySelector(".sched").setAttribute("src", "jun.htm")
    }

    function jul() {
      document.querySelector(".sched").setAttribute("src", "jul.htm")
    }

    function aug() {
      document.querySelector(".sched").setAttribute("src", "aug.htm")
    }

    function sep() {
      document.querySelector(".sched").setAttribute("src", "sep.htm")
    }

    function oct() {
      document.querySelector(".sched").setAttribute("src", "oct.htm")
    }

    function nov() {
      document.querySelector(".sched").setAttribute("src", "nov.htm")
    }

    function dec() {
      document.querySelector(".sched").setAttribute("src", "dec.htm")
    }
  </script>
</head>

<body>
  <ul>
    <li><a id="january" href="#" onclick="jan()">January</a></li>
    <li><a id="february" href="#" onclick="feb()">February</a></li>
    <li><a id="march" href="#" onclick="mar()">March</a></li>
    <li><a id="april" href="#" onclick="apr()">April</a></li>
    <li><a id="may" href="#" onclick="may()">May</a></li>
    <li><a id="june" href="#" onclick="jun()">June</a></li>
    <li><a id="july" href="#" onclick="jul()">July</a></li>
    <li><a id="august" href="#" onclick="aug()">August</a></li>
    <li><a id="september" href="#" onclick="sep()">September</a></li>
    <li><a id="october" href="#" onclick="oct()">October</a></li>
    <li><a id="november" href="#" onclick="nov()">November</a></li>
    <li><a id="december" href="#" onclick="dec()">December</a></li>
  </ul>
  <iframe sandbox="" allowfullscreen frameborder="0" class="sched"></iframe>
</body>

</html>

Javascript - 加载当前月份htm - 问题

3 个答案: