日期控件-1.javascript实现简易日历

最新推荐文章于 2020-05-14 17:26:50 发布

Fish0227

最新推荐文章于 2020-05-14 17:26:50 发布

阅读量827

点赞数

CC 4.0 BY-SA版权

分类专栏：控件文章标签： date 日历文档

本文链接：https://blog.youkuaiyun.com/Fish0227/article/details/3638346

控件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的日历生成器，能够根据当前日期自动填充日历表格，并突出显示今天这一天。通过简单的脚本和样式设置，使得日历具备基本的美观性和功能性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
/*  function show(){
        var tex1 = document.getElementById("tex1");
        var tex2= document.getElementById("tex2");
            var currentDate = new Date();
            var date = new Date("1988","2","43");
            alert(currentDate.getFullYear().toString() +  + currentDate.getMonth().toString() + currentDate.getDate().toString());
    }*/
    
    var MonthListByLeap = new Array(31,29,31,30,31,30,31,31,30,31,30,31);   //闰年各月份天数 
    var MonthList = new Array(31,28,31,30,31,30,31,31,30,31,30,31);     //正常各月份天数 
    
    //初始化当前月日历 
    function InitCalendar(){
        var cDate = new Date();     //当前时间 
        ShowDate(cDate.getDate(),cDate.getMonth(),cDate.getYear());
    }
    
    //显示日历 
    function ShowDate(date,month,year){     
        var table = document.getElementById("dt_Date");         //日历表ID 
        var rowIndex =1 ;       //显示行索引 
        var _date = new Date(year,month);       //月份信息   
        for(var i = 0;i < parseInt(MonthListByLeap[parseInt(month)]);i++){
            _date.setDate(i+1);     //设置日期 
            var day = i+1;      //日 
            table.rows[rowIndex].cells[0].style.background="#B1D3EC";   //设置周日的背景色 
            table.rows[rowIndex].cells[0].style.color="#ffffff";        //设置周日的字体颜色 
            
            if(parseInt(i)+1 == parseInt(date)){
                table.rows[rowIndex].cells[parseInt(_date.getDay())].innerHTML="<strong>"+day.toString()+"</strong>";
            }
            else{
                table.rows[rowIndex].cells[parseInt(_date.getDay())].innerText = day;   //显示日期           
            }
            if(_date.getDay() == "6")
                rowIndex += 1;
        }
    }
</script>
<style type="text/css">
<!--
.STYLE11 {color: #FFFFFF}
-->
</style>
</head>
<body onload="InitCalendar()">
<table border="1" bordercolor="#FFFFFF" cellspacing="0" cellpadding="1" id="dt_Date" style="border-bottom-color:#FFFFFF; background-color:#EEEEEE; font-size:12px">
  <tr bgcolor="#6CAAD9">
    <td width="15" height="15" align="center"><span class="STYLE11">日</span></td>
    <td width="15" height="15" align="center">一</td>
    <td width="15" height="15" align="center">二</td>
    <td width="15" height="15" align="center">三</td>
    <td width="15" height="15" align="center">四</td>
    <td width="15" height="15" align="center">五</td>
    <td width="15" height="15" align="center">六</td>
  </tr>
  <tr>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  </tr>
  <tr>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  </tr>
  <tr>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  </tr>
  <tr>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  </tr>
  <tr>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
    <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  </tr>
</table>
</body>
</html>