search

Home >Web Front-end >JS Tutorial >Javascript html implements web version calendar code_javascript skills

Javascript html implements web version calendar code_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:11:431499browse

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

Rendering:

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='1' width='273' height='158'>");
    document.write ("<tr>");
    document.write ("<td height='23' width='39'><font color='red'>Sun</font></td>");
    document.write ("<td height='23' width='39'>Mon</td>");
    document.write ("<td height='23' width='39'>Tue</td>");
    document.write ("<td height='23' width='39'>Wed</td>");
    document.write ("<td height='23' width='39'>Thu</td>");
    document.write ("<td height='23' width='39'>Fri</td>");
    document.write ("<td height='23' width='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='23' width='39'>");
    if(j>=(tempday)) {
    tempday=0;//设置为最小，相当于取消判断条件
    if(theday<=max) {
     document.write ("<a title=" + my.getFullYear() + "-" + (my.getMonth()+1) + "-" +theday + " target='_blank' href=detail.asp&#63;date=" + theday + ">");
     if(theday==my.getDate())
     document.write ("<font color='green'>[" + theday + "]</font></a>");
     else if(j==0)
     document.write ("<font color='red'>" + 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-based calendar.

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：Summary of methods for filtering Chinese characters and spaces in JavaScript strings_javascript skillsNext article：Summary of methods for filtering Chinese characters and spaces in JavaScript strings_javascript skills

Related articles

See more