javascript html实现网页版日历代码

前端技术 2023/09/02 JavaScript

本文实例为大家分享了网页版日历代码，供大家参考，具体内容如下

效果图：

实现代码：

<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?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>

以上就是本文的全部内容，希望大家可以轻松实现网页版日历。

本文地址：https://www.stayed.cn/item/5779

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案