日期-日历的实现
2013-10-24 21:57
661 查看
一、效果图
二、制作思想
1、求每个月的行数
1）获取每月第一天是星期几，比如效果图中是星期二
2）那么这个月的天数为2+31
3）得出(33-1)/7+1=5行
2、填充行
1）第一行前面的星期天，星期一是上个月的，所以填充空格
2）中间的四行递归填充
3）最后一行剩下的也填充空格
for (var i = 0; i < row; i++) {
ht += "<tr>";
for (var j = 0; j < 7; j++) {
if (i == 0 && j < firday) {//第一行空格填充
// document.write("<td> </td>");
ht += "<td> </td>";
}
else if (i == row - 1 && lasday % 7 != 0 && j >= lasday % 7) {//最后一行空格填充
// document.write("<td> </td>");
ht += "<td> </td>";
}
else {//其它填充
//document.write("<td>" + (7 * i - firday + 1 + j) + "</td>");
if ((7 * i - firday + 1 + j) == date && year == nowyear && monindex == nowmon) {//如果是今天
ht += "<td><span style='color:white; background:#000;'>" + (7 * i - firday + 1 + j) + "</span></td>";
} else
ht += "<td>" + (7 * i - firday + 1 + j) + "</td>";
}
}
//document.write("</tr>");
ht += "</tr>"
}
三、完整代码
<!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>
<title>自己制作的简单日历</title>
<style type="text/css">
#date th, #date td
{
width: 30px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="date" style="background: #ddd; width: 210px; height: 270px; margin: 0 auto;">
</div>
<script type="text/javascript">
var myRiLi = function (year, monindex, date) {
var day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//创建每个月天数的数组
var timenow = new Date();
var nowyear = timenow.getFullYear();//获取当前时间
var nowmon = timenow.getMonth();//获取当前月的索引，如9代表10月
var nowdate = timenow.getDate();//获取日期
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {//判断是否闰年，是的话，二月29天。
day[1] = 29;
}
var firday = (new Date(year, monindex, 1)).getDay();//获取每个月的第一天是星期几，比如星期三，则firday=3
var lasday = day[monindex] + firday;//那么这个月总天数为 firsday+实际天数
var row = Math.floor((lasday - 1) / 7) + 1;//一行7列，获取行数，以上三句是关键代码，主体思想
var ht = "<table cellpadding='0' cellspacing='0'><tr><th colspan='2' id='yearup'>《</th><th colspan='3'><span id='year'>" + year + "</span>年</th><th colspan='2' id='yeardown'>》</th></tr><tr><th colspan='2' id='monthup'>《</th><th colspan='3'><span
id='month'>" + (monindex + 1) + "</span>月</th><th colspan='2' id='monthdown'>》</th></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
for (var i = 0; i < row; i++) {
//document.write("<tr>");
ht += "<tr>";
for (var j = 0; j < 7; j++) {
if (i == 0 && j < firday) {//如果第一天星期三，则前面几个填空格
// document.write("<td> </td>");
ht += "<td> </td>";
}
else if (i == row - 1 && lasday % 7 != 0 && j >= lasday % 7) {
// document.write("<td> </td>");
ht += "<td> </td>";
}
else {
//document.write("<td>" + (7 * i - firday + 1 + j) + "</td>");
if ((7 * i - firday + 1 + j) == date && year == nowyear && monindex == nowmon) {
ht += "<td><span style='color:white; background:#000;'>" + (7 * i - firday + 1 + j) + "</span></td>";
} else
ht += "<td>" + (7 * i - firday + 1 + j) + "</td>";
}
}
//document.write("</tr>");
ht += "</tr>"
}
return ht + "</table>";
}//函数myRiLi结束,
var mydate = new Date();
var year1 = mydate.getFullYear();
var monindex = mydate.getMonth();
var daynum = mydate.getDate();
var tit = document.getElementById("date");
tit.innerHTML = myRiLi(year1, monindex, daynum);
function yearup2(str) {
return document.getElementById(str);
}
function aaa() {//上一年
var k = parseInt(yearspan.innerHTML) - 1;
var l = parseInt(monthspan.innerHTML) - 1;
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function bbb() {//下一年
var k = parseInt(yearspan.innerHTML) + 1;
var l = parseInt(monthspan.innerHTML) - 1;
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function ccc() {//上一月
var k = parseInt(yearspan.innerHTML);
var l = parseInt(monthspan.innerHTML) - 2;
if (l == -1) {
l = 11;
k -= 1;
}
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function ddd() {//下一月
var k = parseInt(yearspan.innerHTML);
var l = parseInt(monthspan.innerHTML);
if (l == 12) {
l = 0;
k += 1;
}
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function ChonXin() {
yearspan = document.getElementById('year');
monthspan = document.getElementById('month');
yearup1 = yearup2("yearup");
yeardown1 = yearup2("yeardown");
monthup1 = yearup2("monthup");
monthdown1 = yearup2("monthdown");
yearup1.onclick = aaa;
yeardown1.onclick = bbb;
monthup1.onclick = ccc;
monthdown1.onclick = ddd;
}
ChonXin();
// alert(row);
</script>
</body>
</html>
二、制作思想
1、求每个月的行数
1）获取每月第一天是星期几，比如效果图中是星期二
2）那么这个月的天数为2+31
3）得出(33-1)/7+1=5行
2、填充行
1）第一行前面的星期天，星期一是上个月的，所以填充空格
2）中间的四行递归填充
3）最后一行剩下的也填充空格
for (var i = 0; i < row; i++) {
ht += "<tr>";
for (var j = 0; j < 7; j++) {
if (i == 0 && j < firday) {//第一行空格填充
// document.write("<td> </td>");
ht += "<td> </td>";
}
else if (i == row - 1 && lasday % 7 != 0 && j >= lasday % 7) {//最后一行空格填充
// document.write("<td> </td>");
ht += "<td> </td>";
}
else {//其它填充
//document.write("<td>" + (7 * i - firday + 1 + j) + "</td>");
if ((7 * i - firday + 1 + j) == date && year == nowyear && monindex == nowmon) {//如果是今天
ht += "<td><span style='color:white; background:#000;'>" + (7 * i - firday + 1 + j) + "</span></td>";
} else
ht += "<td>" + (7 * i - firday + 1 + j) + "</td>";
}
}
//document.write("</tr>");
ht += "</tr>"
}
三、完整代码
<!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>
<title>自己制作的简单日历</title>
<style type="text/css">
#date th, #date td
{
width: 30px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="date" style="background: #ddd; width: 210px; height: 270px; margin: 0 auto;">
</div>
<script type="text/javascript">
var myRiLi = function (year, monindex, date) {
var day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//创建每个月天数的数组
var timenow = new Date();
var nowyear = timenow.getFullYear();//获取当前时间
var nowmon = timenow.getMonth();//获取当前月的索引，如9代表10月
var nowdate = timenow.getDate();//获取日期
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {//判断是否闰年，是的话，二月29天。
day[1] = 29;
}
var firday = (new Date(year, monindex, 1)).getDay();//获取每个月的第一天是星期几，比如星期三，则firday=3
var lasday = day[monindex] + firday;//那么这个月总天数为 firsday+实际天数
var row = Math.floor((lasday - 1) / 7) + 1;//一行7列，获取行数，以上三句是关键代码，主体思想
var ht = "<table cellpadding='0' cellspacing='0'><tr><th colspan='2' id='yearup'>《</th><th colspan='3'><span id='year'>" + year + "</span>年</th><th colspan='2' id='yeardown'>》</th></tr><tr><th colspan='2' id='monthup'>《</th><th colspan='3'><span
id='month'>" + (monindex + 1) + "</span>月</th><th colspan='2' id='monthdown'>》</th></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
for (var i = 0; i < row; i++) {
//document.write("<tr>");
ht += "<tr>";
for (var j = 0; j < 7; j++) {
if (i == 0 && j < firday) {//如果第一天星期三，则前面几个填空格
// document.write("<td> </td>");
ht += "<td> </td>";
}
else if (i == row - 1 && lasday % 7 != 0 && j >= lasday % 7) {
// document.write("<td> </td>");
ht += "<td> </td>";
}
else {
//document.write("<td>" + (7 * i - firday + 1 + j) + "</td>");
if ((7 * i - firday + 1 + j) == date && year == nowyear && monindex == nowmon) {
ht += "<td><span style='color:white; background:#000;'>" + (7 * i - firday + 1 + j) + "</span></td>";
} else
ht += "<td>" + (7 * i - firday + 1 + j) + "</td>";
}
}
//document.write("</tr>");
ht += "</tr>"
}
return ht + "</table>";
}//函数myRiLi结束,
var mydate = new Date();
var year1 = mydate.getFullYear();
var monindex = mydate.getMonth();
var daynum = mydate.getDate();
var tit = document.getElementById("date");
tit.innerHTML = myRiLi(year1, monindex, daynum);
function yearup2(str) {
return document.getElementById(str);
}
function aaa() {//上一年
var k = parseInt(yearspan.innerHTML) - 1;
var l = parseInt(monthspan.innerHTML) - 1;
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function bbb() {//下一年
var k = parseInt(yearspan.innerHTML) + 1;
var l = parseInt(monthspan.innerHTML) - 1;
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function ccc() {//上一月
var k = parseInt(yearspan.innerHTML);
var l = parseInt(monthspan.innerHTML) - 2;
if (l == -1) {
l = 11;
k -= 1;
}
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function ddd() {//下一月
var k = parseInt(yearspan.innerHTML);
var l = parseInt(monthspan.innerHTML);
if (l == 12) {
l = 0;
k += 1;
}
tit.innerHTML = myRiLi(k, l, daynum);
ChonXin();
}
function ChonXin() {
yearspan = document.getElementById('year');
monthspan = document.getElementById('month');
yearup1 = yearup2("yearup");
yeardown1 = yearup2("yeardown");
monthup1 = yearup2("monthup");
monthdown1 = yearup2("monthdown");
yearup1.onclick = aaa;
yeardown1.onclick = bbb;
monthup1.onclick = ccc;
monthdown1.onclick = ddd;
}
ChonXin();
// alert(row);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- 从jsp发送动态图像
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- 仿51JOB的地区选择效果(可选择多个地区)
- js身份证验证超强脚本
- 28个JS验证函数收集
- js继承 Base类的源码解析
- js禁用和激活input表单的方法
- JS小框架 fly javascript framework
- js可拖动的后台界面
- javascript 获取网页参数系统