Java小项目之：教你做电子日历！

我不是女神ヾ 2023-07-07 08:55 8阅读 0赞

Java小项目之：教你做电子日历！  
<!doctype html>

日历控件

var days = new Array(“日”,“一”,“二”,“三”,“四”,“五”,“六”);//星期  
var today = new Date();//当天日期，备用  
var month\_big = new Array(“1”,“3”,“5”,“7”,“8”,“10”,“12”); //包含所有大月的数组  
var month\_small = new Array(“4”,“6”,“9”,“11”); //包含所有小月的数组  
var separator = “-”;//间隔符

var calendar = document.getElementById(“calendar”);  
var cal\_parent = calendar.parentNode;//获取父元素  
var cal\_width = ((calendar.clientWidth<150) ? 150 : calendar.clientWidth);//获取input的宽度，如果input宽度小于150，调整为150，150为日历块最小宽度  
var cal\_height = calendar.clientHeight;//获取input的高度，整数  
var cal\_X = calendar.offsetLeft;//获取input左边 距父元素的距离，整数  
var cal\_Y = calendar.offsetTop;//获取input顶部 距父元素的距离，整数

calendar.style.cursor = “pointer”;//将input的鼠标设置成小手  
calendar.readOnly = “readOnly”;//设置input为只读  
calendar.onblur = hideCalendar; //当input失去焦点时，隐藏cal\_body  
calendar.onclick = showCalendar;//点击input时调用showCalendar函数

//取input宽度的七分之一再减一作为方格的边长  
var pane\_height = cal\_width/7 - 1;

function hideCalendar()\{  
var cal\_body = document.getElementById(“cal\_body”);  
if(cal\_body != undefined)\{  
cal\_body.parentNode.removeChild(cal\_body);  
\}  
\}

//显示日历主体  
function showCalendar()\{  
var cal\_body = document.getElementById(“cal\_body”);  
if(cal\_body != undefined)\{  
cal\_body.parentNode.removeChild(cal\_body);  
\}  
else\{  
var cal\_body = document.createElement(“DIV”);  
cal\_body.id = “cal\_body”;  
cal\_body.style.width = cal\_width + “px”;  
cal\_body.style.height = “auto”;  
cal\_body.style.overflow = “hidden”;  
cal\_body.style.position = “absolute”;  
cal\_body.style.zIndex = “9”;  
cal\_body.style.left = cal\_X + “px”;  
cal\_body.style.top = (cal\_Y + cal\_height + 5) + “px”;  
cal\_body.style.border = “solid 1px \#CCCCCC”;  
//鼠标移动到cal\_body上时，禁用input的onblur事件，防止cal\_body因input失去焦点而被隐藏  
cal\_body.onmouseover = function()\{  
calendar.onblur = undefined;  
\}  
//鼠标从cal\_body移除时，启用input的onblur事件，并且先让input获得焦点，否则当在cal\_body上空白处点击后再移出在其他地方点击时，input因没有焦点而无法触发onblur事件  
cal\_body.onmouseout = function()\{  
calendar.focus();  
calendar.onblur = hideCalendar;  
\}  
cal\_parent.appendChild(cal\_body);

function init(val)\{  
clearPane();

//格式化输出  
Date.prototype.toFormatString = function(separator)\{  
var result = this.getFullYear() + separator + (this.getMonth() + 1) + separator + this.getDate();  
return result;  
\};

//从格式化字符串中获取年份  
String.prototype.year = function()\{  
var str = this.substring(0,4);  
return str;  
\};

//从格式化字符串中获取月份  
String.prototype.month = function(separator)\{  
var start = this.indexOf(separator) + 1;  
var end = this.lastIndexOf(separator);  
return parseInt(this.substring(start, end)) - 1;  
\};

//从格式化字符串中获取日期  
String.prototype.date = function(separator)\{  
var start = this.lastIndexOf(separator) + 1;  
return this.substring(start);  
\};

//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false  
function array\_contain(array, obj)\{  
for (var i = 0; i < array.length; i++)\{  
if (array\[i\] == obj)  
return true;  
\}  
return false;  
\}

//判断年份year是否为闰年，是闰年则返回true，否则返回false  
function isLeapYear(year)\{  
var a = year % 4;  
var b = year % 100;  
var c = year % 400;  
if( ( (a == 0) && (b != 0) ) || (c == 0) )\{  
return true;  
\}  
return false;  
\}

//清除方格  
function clearPane()\{  
var limit = document.getElementsByClassName(“pane”).length;  
for(var i=7; i < limit; i++)\{  
var pane = document.getElementsByClassName(“pane”).item(7);  
pane.parentNode.removeChild(pane);  
\}  
\}

//判断输入是否合法  
function isValidated()\{  
var year = document.getElementById(“input\_year”).value;  
var month = document.getElementById(“input\_month”).value;  
if(isNaN(year) || isNaN(month))\{  
alert(“请输入正确的年份/月份”);  
return false;  
\}  
else\{  
if(year%1 != 0 || month%1 != 0)\{  
alert(“请输入正确的年份/月份”);  
return false;  
\}  
else\{  
year = parseInt(year);  
if(year < 1960 || year > 2050)\{  
alert(“请输入1960~2050之间的年份！”);  
return false;  
\}  
else if(month < 1 || month >12)\{  
alert(“请输入正确的月份！”);  
return false;  
\}  
else\{  
return true;  
\}  
\}  
\}  
\}

//年份月份发生变化时处理函数  
function changed()\{  
if(isValidated())\{  
var year = document.getElementById(“input\_year”).value;  
var month = document.getElementById(“input\_month”).value;  
var val = year + separator + month + separator + 1;  
init(val);  
\}  
\}  
喜欢这样文章的可以关注我，我会持续更新，你们的关注是我更新的动力！需要更多java学习资料的也可以私信我！  
祝关注我的人都：身体健康，财源广进，福如东海,寿比南山，早生贵子，从不掉发!![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1R5bG9vX3dkbm1k_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1R5bG9vX3dkbm1k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222152515957.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1R5bG9vX3dkbm1k,size_16,color_FFFFFF,t_70