Home > Article > Web Front-end > javascript html implements web page calendar code

javascript html implements web page calendar code

高洛峰Original: 2017-02-06 10:44:422728browse

The example in this article shares the web page calendar code for your reference. The specific content is as follows

Rendering:

javascript html实现网页版日历代码

Implementation code:

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="Skin.css">
  <style>
  <!--
  table{ text-align: center }
  -->
  </style>
 </head>
  
 <body>
  <div align="center">
   <script language="javascript">
   var my = new Date();
    
   function showc() {
    var k=1;
    var j=1;
    var today;
    var tomonth;
    var theday=1;//日期
    var max;
    var temp;
    var tempday;//这个月第一天的星期
    document.write ("<b>" + my.getFullYear() + "-" + (my.getMonth()+1) + "</b>");
    document.write ("<table border=&#39;1&#39; width=&#39;273&#39; height=&#39;158&#39;>");
    document.write ("<tr>");
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;><font color=&#39;red&#39;>Sun</font></td>");
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;>Mon</td>");
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;>Tue</td>");
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;>Wed</td>");
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;>Thu</td>");
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;>Fri</td>");
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;>Sat</td>");
    document.write ("</tr>");
    temp=my.getDate();
    my.setDate(1);
    //document.write (my.getDate());
    tempday=my.getDay();//返回第一天是星期几
    my.setDate(temp);
    today=my.getDay();//返回现在星期几
    
    switch ((my.getMonth()+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:
    max=29;//这里没有考虑闰月！！
    //document.write (max);
    }
    for(k=0;k<6;k++) {
    document.write ("<tr>");
    for(j=0;j<=6;j++) {
    document.write ("<td height=&#39;23&#39; width=&#39;39&#39;>");
    if(j>=(tempday)) {
    tempday=0;//设置为最小，相当于取消判断条件
    if(theday<=max) {
     document.write ("<a title=" + my.getFullYear() + "-" + (my.getMonth()+1) + "-" +theday + " target=&#39;_blank&#39; href=detail.asp?date=" + theday + ">");
     if(theday==my.getDate())
     document.write ("<font color=&#39;green&#39;>[" + theday + "]</font></a>");
     else if(j==0)
     document.write ("<font color=&#39;red&#39;>" + theday + "</font></a>");
     else
     document.write (theday + "</a>");
     theday++;
    }
    }
    document.write ("</td>");
    }
    document.write ("</tr>");
    }
    document.write ("</table>");
   }
    
   showc();
  </script>
  </div>
 <body>
</html>

The above is the entire content of this article. I hope you can easily implement a web version of the calendar.

For more articles related to javascript html implementation of web page calendar code, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js to write a simple calendar effect for the dayNext article：js to write a simple calendar effect for the day

See more

javascript html implements web page calendar code

Related articles