javascript使button常显示并实现onclick

求助javascript使button常显示并实现onclick
本帖最后由 baidu_21837257 于 2015-03-16 22:49:57 编辑
我的设想是点击一次next或者past就进入到下一个月或者上一个月,实现简单的万年历功能,但是我现在不点击next按钮就自动无限执行下去了,我不会改,希望各位大神帮忙。
<html>
<head>

   <style>
    <!--
    table{ text-align: center }
    -->
    
   </style>
  <script type="text/javascript">
  var my1 = new Date();
  var m=my1.getMonth(); 
  var n = 1;
  var t = 1;
    function calendar(){
      m = m + 1;
      my.setMonth(m);
      showc();
 
    }
    function calendar1(){
      m = my1.getMonth() - 1;
      my.setMonth(m);
      showc();

    }
     function showc() {
      var j=1;
      var today;
      var tomonth;
      var theday=1;//日期
      var max;
      var temp;
      var tempday;
      document.write ("<b>" + my.getFullYear() + "-" + (m + 1) + "</b>");
      document.write ("<table border='1' width='900' height='600'>");
      document.write ("<tr>");
      document.write ("<td height='23' width='39'><font size=5 color='red'>Sun</font></td>");
      document.write ("<td height='23' width='39'><font size=5>Mon</font></td>");
      document.write ("<td height='23' width='39'><font size=5>Tus</font></td>");
      document.write ("<td height='23' width='39'><font size=5>Wed</font></td>");
      document.write ("<td height='23' width='39'><font size=5>Thu</font></td>");
      document.write ("<td height='23' width='39'><font size=5>Fri</font></td>");
      document.write ("<td height='23' width='39'><font size=5>Sat</font></td>");
      document.write ("</tr>");
      //temp=my.getDate();
      my.setDate(1);
      //document.write (my.getDate());
      tempday=my.getDay();//返回第一天是星期几
      my.setDate(n);
      today=t;//返回现在星期几
      switch ((m+1)) {
       case 1:
       case 3:
       case 5:
       case 7:
       case 8:
       case 10:
       case 12:
        max=31;
        break;
       case 4:
       case 6:
       case 9:
       case 11:
        max=30;
        break;
       default: //判断是不是闰年
       if(my.getFullYear() % 4 == 0 && my.getFullYear() % 100 != 0)
         max=29;
       else max = 28;
       //document.write (max);
      }
      for(k=0;k<6;k++) {
       document.write ("<tr>");
       for(j=0;j<=6;j++) {
        document.write ("<td height='23' width='39'>");
        if(j>=(tempday)) {
         tempday=0;//设置为最小,相当于取消判断条件
         if(theday<=max) {
          document.write ("<a title=" + my.getFullYear() + "-" + (m+1) + "-" +theday + " target='_blank' href=C:/Users/BlueCube13/Desktop/c.html" +">");
          if(theday==my.getDate()) 
           document.write ("<font color='green' size=5>" + theday + "</font></a>");
           else if(j==0 || j==6)
           document.write ("<font color='red' size=5>" + theday + "</font></a>");
          else
           document.write ("<font size=5>" + theday + "</font></a>");
          theday++;
         }
        }
        document.write ("</td>");
       }
       document.write ("</tr>");
      }
      document.write ("</table>");
      document.write("<input type='button'id='btn1' value='Next' />");
      document.getElementById("btn1").onclick=calendar();
     }
  </script>   
</head>

<body>

   <div align="center">
    <script language="javascript">


     var my = new Date();
     var n = my.getDate();
     var t = my.getDay();
    
     //************************************************函数结束
     showc();
    </script>
   </div>

<body>
</html>

------解决思路----------------------
document.getElementById("btn1").onclick = calendar;
后面的()去掉,你这样表示执行calendar(),但貌似点了next后样式不对了,再点击也有问题
------解决思路----------------------
<html>
<head>

   <style>
   body{text-align:center;}
    <!--
    table{ text-align: center }
    -->
    
   </style>
  <script type="text/javascript">
  var my1 = new Date();
  var m=my1.getMonth(); 
  var n = 1;
  var t = 1;
    function calendar(){
      m = m + 1;
      my.setMonth(m);
      showc();
 
    }
    function calendar1(){
      m = my1.getMonth() - 1;
      my.setMonth(m);
      showc();

    }
     function showc() {
      var j=1;
      var today;
      var tomonth;
      var theday=1;//日期
      var max;
      var temp;
      var tempday;
  var $content='';
      $content+="<b>" + my.getFullYear() + "-" + (m + 1) + "</b>";
      $content+="<table border='1' width='900' height='600'>";
      $content+="<tr>";
      $content+="<td height='23' width='39'><font size=5 color='red'>Sun</font></td>";
      $content+="<td height='23' width='39'><font size=5>Mon</font></td>";
      $content+="<td height='23' width='39'><font size=5>Tus</font></td>";
      $content+="<td height='23' width='39'><font size=5>Wed</font></td>";
      $content+="<td height='23' width='39'><font size=5>Thu</font></td>";
      $content+="<td height='23' width='39'><font size=5>Fri</font></td>";
      $content+="<td height='23' width='39'><font size=5>Sat</font></td>";
      $content+="</tr>";
      //temp=my.getDate();
      my.setDate(1);
      //document.write (my.getDate());
      tempday=my.getDay();//返回第一天是星期几
      my.setDate(n);
      today=t;//返回现在星期几
      switch ((m+1)) {
       case 1:
       case 3:
       case 5:
       case 7:
       case 8:
       case 10:
       case 12:
        max=31;
        break;
       case 4:
       case 6:
       case 9:
       case 11:
        max=30;
        break;
       default: //判断是不是闰年
       if(my.getFullYear() % 4 == 0 && my.getFullYear() % 100 != 0)
         max=29;
       else max = 28;
       //document.write (max);
      }
      for(k=0;k<6;k++) {
       $content+="<tr>";
       for(j=0;j<=6;j++) {
        $content+="<td height='23' width='39'>";
        if(j>=(tempday)) {
         tempday=0;//设置为最小,相当于取消判断条件
         if(theday<=max) {
          $content+="<a title=" + my.getFullYear() + "-" + (m+1) + "-" +theday + " target='_blank' href=C:/Users/BlueCube13/Desktop/c.html" +">";
          if(theday==my.getDate()) 
           $content+="<font color='green' size=5>" + theday + "</font></a>";
           else if(j==0 
------解决思路----------------------
 j==6)
           $content+="<font color='red' size=5>" + theday + "</font></a>";
          else
           $content+="<font size=5>" + theday + "</font></a>";
          theday++;
         }
        }
        $content+="</td>";
       }
       $content+="</tr>";
      }
      $content+="</table>";
      $content+="<input type='button'id='btn1' value='Next' />";
  document.getElementById("div_calendar").innerHTML=$content;
      document.getElementById("btn1").onclick=calendar;
     }
  </script>   
</head>

<body align="center">

   <div align="center" id="div_calendar">
    <script language="javascript">


     var my = new Date();
     var n = my.getDate();
     var t = my.getDay();
    
     //************************************************函数结束
     showc();
    </script>
   </div>

<body>
</html>