日历

最新推荐文章于 2024-05-11 22:35:09 发布

cforwhiledo

最新推荐文章于 2024-05-11 22:35:09 发布

阅读量180

点赞数

分类专栏： js 文章标签： js 简单的日历

本文链接：https://blog.csdn.net/cforwhiledo/article/details/78995537

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE>
<HTML>
<HEAD>
<TITLE>日历</TITLE>

<STYLE>
a {
/** 去掉下划线 **/
text-decoration:none
}
#YMDbox {
position:absolute;
width : 320px;
}
#prevMonth {
float : left;
margin : 1px;
width : 40px;
height : 40px;
}
#now_ymd {
float : left;
margin : 1px;
width : 208px;
height : 40px;
}
#nextMonth {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : right;
}
#prevMonth, #now_ymd, #nextMonth {
background-color : #FF6347;
line-height : 40px;
text-align : center;
}
#title > div {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : center;
line-height : 40px;
background-color : #AFEEEE;
}
#Dbox > div {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : center;
line-height : 40px;
/**和高度一样，才能让文字横向居中**/
background-color : #DCDCDC;
}
#Dbox div:hover {
/** 语法
*标签+:+hover
*标签+.+class属性+:+hover
**/
background-color : yellow;
}
/**
*CSS提供了四种伪类设置链接的颜色，包括:link、:visited、:hover、:active，
*它们的声明是有一定顺序的，我们将这种顺序简称为L-V-H-A，即link最先，
*其次visited，之后*hover，最后active，如此声明才能保证hover与active状态显示正确的样式
**/
</STYLE>
</HEAD>
<BODY>



<div style="margin:100px;" id="datediv">日历 : <input id="date" type="text" size=12 style="height:40px; line-height:40px"></div>

</BODY>
<SCRIPT>
/**
*创建Day的div,每一天是一个div
*
*year:年
*month:月份;
*/
function createDayBox(year, month) {

//该月份的最大日期
var dayMax = 0;
if(month == "01" ||
month == "03" ||
month == "05" ||
month == "07" ||
month == "08" ||
month == "10" ||
month == "12"
) {
dayMax = 31;
} else if(month == "02") {//闰年
if(year%100 == 0) {
if(year%400 == 0) {
dayMax = 29;
} else {
dayMax = 28;
}
} else {
if(year%4 == 0) {
dayMax = 29;
} else {
dayMax = 28;
}
}

} else {
dayMax = 30;
}

var mm = parseInt(month) -1;
var dateByYM = new Date(year, mm, "01");
var day = dateByYM.getDay();//0~6;0是周日

var boxNum = dayMax + day;//div个数
var fbox = "";
var n = 1;
var nowDay = (new Date()).getDate();
for(var i = 1; i <= boxNum; i++) {
if(i < day + 1) {
fbox = fbox + "<div></div>";
continue;
}

if(nowDay == n) {
fbox = fbox + "<div style=\"background-color:yellow\"><a id=\"day_link\" href=\"javascript:daylink('"+ year + month + n +"')\">" + n + "</a></div>";
} else {
fbox = fbox + "<div><a id=\"day_link\" href=\"javascript:daylink('"+ year + month + n +"')\">" + n + "</a></div>";
}

n++;
}

return fbox;
}

/**
*创建日历的整体外层div
*/
function createBox() {

/*
*电脑时间表示大概
*< 2018年1月 >
*日一二三四五六
*/
//现在的日期
var nowDate = new Date();
var nowY = nowDate.getFullYear();
var nowM = nowDate.getMonth();//0~11
var nowD = nowDate.getDay();
nowM = nowM + 1;
if(nowM < 10) {
nowM = "0" + nowM;
}

//日历框的日期
var dateText = document.getElementById("date").value;
if(dateText) {
nowY = dateText.substring(0,4);
nowM = dateText.substring(5,7);
nowD = dateText.substring(7);
}

var box = document.createElement("div");
box.id = "YMDbox";
var obox = "<div id=\"Mbox\">"
obox = obox + "<div id=\"prevMonth\"><a id=\"monthlinkPrev\" href=\"javascript:monthlinkPrev('" + nowY + nowM + "')\"><</a></div>";
obox = obox + "<div id=\"now_ymd\">" + nowY + "年" + nowM + "月" + "</div>"
obox = obox +"<div id=\"nextMonth\"><a id=\"monthlinkNext\" href=\"javascript:monthlinkNext('" + nowY + nowM + "')\">></a></div></div>";
obox = obox +"</div>";
obox = obox + "<div id=\"title\"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>";
box.innerHTML = obox;

var dbox = document.createElement("div");
dbox.id = "Dbox";
dbox.innerHTML = createDayBox(nowY, nowM);
box.appendChild(dbox);

document.body.appendChild(box);

}

/**
*日期链接的方法
*
*ymd:年月日
**/
function daylink(ymd) {

var txt = document.getElementById("date");
txt.value = ymd.substring(0,4) + "-" + ymd.substring(4,6) + "-" + ymd.substring(6);

document.body.removeChild(document.getElementById("YMDbox"));
}

/**
*前月链接的方法
*
*ym:年月
**/
function monthlinkPrev(ym) {

var year = ym.substring(0,4);
var month = ym.substring(4);
month = parseInt(month);

if(month == "1") {
month = "12";
year = --year;
} else {
month = --month;
}

if(month < 10) {
month = "0" + month;
}

monthlink(year, month);
}

/**
*下月链接的方法
*
*ym:年月
**/
function monthlinkNext(ym) {

var year = ym.substring(0,4);
var month = ym.substring(4);
month = parseInt(month);

if(month == "12") {
month = "1";
year = ++year;
} else {
month = ++month;
}

if(month < 10) {
month = "0" + month;
}

monthlink(year, month);
}

/**
*月份链接的共通处理
*
*year:年
*month:月
**/
function monthlink(year, month) {

//重新设置Mbox
var ymd = document.getElementById("now_ymd");
ymd.innerHTML = year + "年" + month + "月";

var monthlinkPrev = document.getElementById("monthlinkPrev");
var monthlinkNext = document.getElementById("monthlinkNext");
monthlinkPrev.href = "javascript:monthlinkPrev('" + year + month + "')";
monthlinkNext.href = "javascript:monthlinkNext('" + year + month + "')";

//重新设置Dbox
var dbox = document.createElement("div");
dbox.id = "Dbox";
var YMDbox = document.getElementById("YMDbox");
YMDbox.removeChild(YMDbox.lastChild);
dbox.innerHTML = createDayBox(year, month);
YMDbox.appendChild(dbox);

}

/**
*焦点事件
**/
date.onfocus = function() {

if(document.getElementById("YMDbox")) {//undefined == false
return false;
}

createBox();

var date = document.querySelector("#date");

//计算位置
//var w = date.clientWidth;
//var h = date.clientHeight;//元素的上边界到窗口的距离，不包含margin,padding,border

//var w = event.clientX;
//var h = event.clientY;//鼠标的位置,只有鼠标事件能有属性

var w = date.clientWidth;
var h = date.offsetTop + date.clientHeight;//offsetTop包含margin但是不包含height
var ymdbox = document.getElementById("YMDbox");
ymdbox.style.left = w;
ymdbox.style.top = h + 5;
};

</SCRIPT>
</HTML>

cforwhiledo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日历

日历a {/** 去掉下划线 **/text-decoration:none}#YMDbox {position:absolute;width : 320px;}#prevMonth {float : left;margin : 1px;width : 40px;height : 40px;}#now_ymd {float :
复制链接

扫一扫