js编写日历

最新推荐文章于 2022-05-27 18:34:23 发布

beijixingtianyake

最新推荐文章于 2022-05-27 18:34:23 发布

阅读量668

点赞数

分类专栏： JS 文章标签： js calendar date 日历

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转载地址：http://blog.csdn.net/chartnie/article/details/6090835

在他人的基础上面做了些修改。

下面的代码可以直接运行。

<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript">


        function addDay(millsSeconds, value) {
            var date = new Date();
            if (millsSeconds > 0) {
                date.setTime(millsSeconds);
            }


            var oneDayMilliseconds = 24 * 60 * 60 * 1000;
            var curTime = date.getTime();
            var destTime = curTime + parseInt(value) * oneDayMilliseconds;
            date.setTime(destTime);
            //alert("add day  is:"+date.getFullYear()+"-"+(date.getMonth()+1));


            setTimearea(date);
            huizhi(date.getTime());
            return date;
        }
        function addMonth(millsSeconds, value) {
            var date = new Date();
            if (millsSeconds > 0) {
                date.setTime(millsSeconds);
            }
            var month = date.getMonth() + parseInt(value);


            if (month < 0) {
                date.setFullYear(date.getFullYear() - 1);
                month = month + 12;
            } else if (month >= 12) {
                date.setMonth(month - value);
                date.setFullYear(date.getFullYear() + 1);
                month = month - 12;
            }
            date.setMonth(month);
            //alert("month is:"+date.getFullYear()+"-"+(date.getMonth()+1));
            setTimearea(date);
            huizhi(date.getTime());
            return date;
        }


        function addYear(millsSeconds, value) {
            var date = new Date();
            if (millsSeconds > 0) {
                date.setTime(millsSeconds);
            }
            date.setFullYear(date.getFullYear() + parseInt(value));


            setTimearea(date);
            huizhi(date.getTime());
            return date;
        }
        function setTimearea(date) {
            document.getElementById("time").innerText = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "- " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        }


        function huizhi(millsSeconds) {


            var d = new Date();
            if (millsSeconds > 0) {
                d.setTime(millsSeconds);
            }
            var year = d.getUTCFullYear();
            var month = (d.getMonth() + 1); // 获取月份。
            var firstDay = new Date(month.toString() + "-1-" + year.toString()).getDay(); //这个月1号是星期几
            //alert("日期字符串是："+month.toString() + "-1-" + year.toString());
            //alert("first day is:"+firstDay);
            var flag = 0;
            var tTable = document.getElementById("tb1");
            var firstTr = tTable.rows[0].cells[0];
            var ds = 31;
            var temp = 0;
            if (parseInt(month) == 4 || parseInt(month) == 6 || parseInt(month) == 9 || parseInt(month) == 11) {
                ds = 30;
            }
            if (parseInt(month) == 2) {
                if ((parseInt(year) % 400 == 0) || (parseInt(year) % 100 != 0) && (parseInt(year) % 4 == 0)) {
                    ds = 29;
                } else {
                    ds = 28;
                }
            }
            var atemp = ",";
            var days = new Array("1", "3", "4", "5");
            for (var k = 0; k < days.length; k++) {
                atemp += days[k] + ",";
            }
            firstTr.innerHTML = " <a href='#'  οnclick=\"addYear(" + d.getTime() + ",'-1')\">去年</a>           <a href='#' οnclick=\"addMonth(" + d.getTime() + ",'-1')\">上月</a>     " + month + "月" + "  <a href='#'   οnclick=\"addMonth(" + d.getTime() + ",'1')\">下月</a>      <a href='#'  οnclick=\"addYear(" + d.getTime() + ",'1')\">明年</a> ";
            for (var i = 2; i < 8; i++) {
                if (millsSeconds > 0) {
                    tTable.deleteRow(i);
                }
                var tRow = tTable.insertRow(i);
                for (var j = 0; j < 7; j++) {
                    var tCell = tRow.insertCell(j);
                    temp = (i - 2) * 7 + j - parseInt(firstDay) + 1;
                    if (temp > ds) {
                        break;
                    }
                    if (parseInt(d.getDate()) == temp) {
                        tCell.innerHTML = temp;
                        //$(tCell).attr("style", "font-weight:bold");如果是当天就突出显示
                    }
                    if (temp > 0) {
                        if (atemp.indexOf("," + temp + ",") > -1) {
                            tCell.innerHTML = "<a href='#'>" + temp + "</a>";
                            //如果是数组里面的特定月份就加上链接
                        }
                        else
                            tCell.innerHTML = temp;
                    }
                }
                flag++;
            }
            var lastTr = tTable.rows[tTable.rows.length - 1].cells[0];
            if ((month - 1) > 0) {
                lastTr.innerHTML = (month - 1) + "月";
            }
        }
        ;




    </script>
</head>
<body οnlοad="huizhi('')">
<div id="time"></div>
<form id="form1">
    <table width="300" id="tb1" style="border:0px; margin:0px; padding:0px;">
        <tr>
            <td colspan="7" style="text-align:center"></td>
        </tr>
        <tr style="background-color:#e5e5e5;">
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        <tr style="background-color:#e5e5e5;color:#ff00ff; size:16px;">
            <td colspan="7"></td>
        </tr>
    </table>
</form>
</body>
</html>

<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">

function addDay(millsSeconds, value) {
var date = new Date();
if (millsSeconds > 0) {
date.setTime(millsSeconds);
}

var oneDayMilliseconds = 24 * 60 * 60 * 1000;
var curTime = date.getTime();
var destTime = curTime + parseInt(value) * oneDayMilliseconds;
date.setTime(destTime);
//alert("add day is:"+date.getFullYear()+"-"+(date.getMonth()+1));

setTimearea(date);
huizhi(date.getTime());
return date;
}
function addMonth(millsSeconds, value) {
var date = new Date();
if (millsSeconds > 0) {
date.setTime(millsSeconds);
}
var month = date.getMonth() + parseInt(value);

if (month < 0) {
date.setFullYear(date.getFullYear() - 1);
month = month + 12;
} else if (month >= 12) {
date.setMonth(month - value);
date.setFullYear(date.getFullYear() + 1);
month = month - 12;
}
date.setMonth(month);
//alert("month is:"+date.getFullYear()+"-"+(date.getMonth()+1));
setTimearea(date);
huizhi(date.getTime());
return date;
}

function addYear(millsSeconds, value) {
var date = new Date();
if (millsSeconds > 0) {
date.setTime(millsSeconds);
}
date.setFullYear(date.getFullYear() + parseInt(value));

setTimearea(date);
huizhi(date.getTime());
return date;
}
function setTimearea(date) {
document.getElementById("time").innerText = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "- " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}

function huizhi(millsSeconds) {

var d = new Date();
if (millsSeconds > 0) {
d.setTime(millsSeconds);
}
var year = d.getUTCFullYear();
var month = (d.getMonth() + 1); // 获取月份。
var firstDay = new Date(month.toString() + "-1-" + year.toString()).getDay(); //这个月1号是星期几
//alert("日期字符串是："+month.toString() + "-1-" + year.toString());
//alert("first day is:"+firstDay);
var flag = 0;
var tTable = document.getElementById("tb1");
var firstTr = tTable.rows[0].cells[0];
var ds = 31;
var temp = 0;
if (parseInt(month) == 4 || parseInt(month) == 6 || parseInt(month) == 9 || parseInt(month) == 11) {
ds = 30;
}
if (parseInt(month) == 2) {
if ((parseInt(year) % 400 == 0) || (parseInt(year) % 100 != 0) && (parseInt(year) % 4 == 0)) {
ds = 29;
} else {
ds = 28;
}
}
var atemp = ",";
var days = new Array("1", "3", "4", "5");
for (var k = 0; k < days.length; k++) {
atemp += days[k] + ",";
}
firstTr.innerHTML = " <a href='#' οnclick=\"addYear(" + d.getTime() + ",'-1')\">去年</a> <a href='#' οnclick=\"addMonth(" + d.getTime() + ",'-1')\">上月</a> " + month + "月" + " <a href='#' οnclick=\"addMonth(" + d.getTime() + ",'1')\">下月</a> <a href='#' οnclick=\"addYear(" + d.getTime() + ",'1')\">明年</a> ";
for (var i = 2; i < 8; i++) {
if (millsSeconds > 0) {
tTable.deleteRow(i);
}
var tRow = tTable.insertRow(i);
for (var j = 0; j < 7; j++) {
var tCell = tRow.insertCell(j);
temp = (i - 2) * 7 + j - parseInt(firstDay) + 1;
if (temp > ds) {
break;
}
if (parseInt(d.getDate()) == temp) {
tCell.innerHTML = temp;
//$(tCell).attr("style", "font-weight:bold");如果是当天就突出显示
}
if (temp > 0) {
if (atemp.indexOf("," + temp + ",") > -1) {
tCell.innerHTML = "<a href='#'>" + temp + "</a>";
//如果是数组里面的特定月份就加上链接
}
else
tCell.innerHTML = temp;
}
}
flag++;
}
var lastTr = tTable.rows[tTable.rows.length - 1].cells[0];
if ((month - 1) > 0) {
lastTr.innerHTML = (month - 1) + "月";
}
}
;

</script>
</head>
<body οnlοad="huizhi('')">
<div id="time"></div>
<form id="form1">
<table width="300" id="tb1" style="border:0px; margin:0px; padding:0px;">
<tr>
<td colspan="7" style="text-align:center"></td>
</tr>
<tr style="background-color:#e5e5e5;">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tr style="background-color:#e5e5e5;color:#ff00ff; size:16px;">
<td colspan="7"></td>
</tr>
</table>
</form>
</body>
</html>