正文 

当前位置： 首页 > java > java教程

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

     2022-05-09     580

关键词：

Java小项目之：教你做电子日历！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历控件</title>
<script src="js/new_file.js" defer></script>
</head>

<body>
<input id="calendar" type="text" />
</body>
</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);

    var line1 = document.createElement("DIV");
    line1.style.width = cal_width + "px";
    line1.style.height =  pane_height + "px";
    line1.style.backgroundColor = "#0FF";

    var btn1 = document.createElement("DIV");
    btn1.style.width = (cal_width/3 - 3) + "px";
    btn1.style.height = pane_height + "px";
    btn1.style.lineHeight = pane_height + "px";
    btn1.style.textAlign = "center";
    btn1.innerHTML = "<";
    btn1.style.cursor = "pointer";
    btn1.style.cssFloat = "left";
    btn1.onclick = function(){
        if(isValidated()){
            var old_year = parseInt(document.getElementById("input_year").value);
            if(old_year > 1960){
                var year = old_year - 1;
                var month = parseInt(document.getElementById("input_month").value);
                var val = year + separator + month + separator + 1;
                init(val);
            }
        }
    };
    line1.appendChild(btn1);

    var input_year = document.createElement("INPUT");
    input_year.id = "input_year";
    input_year.style.width = (cal_width/3) + "px";
    input_year.style.height = "70%";
    input_year.style.cssFloat = "left";
    input_year.style.textAlign = "center";
    input_year.onchange = function(){
        changed();
    };
    line1.appendChild(input_year);

    var btn2 = document.createElement("DIV");
    btn2.style.width = (cal_width/3 - 3) + "px";
    btn2.style.height = pane_height + "px";
    btn2.style.lineHeight = pane_height + "px";
    btn2.style.textAlign = "center";
    btn2.innerHTML = ">";
    btn2.style.cursor = "pointer";
    btn2.style.cssFloat = "left";
    btn2.onclick = function(){
        if(isValidated()){
            var old_year = parseInt(document.getElementById("input_year").value);
            if(old_year < 2050){
                var year = old_year + 1;
                var month = parseInt(document.getElementById("input_month").value);
                var val = year + separator + month + separator + 1;
                init(val);
            }
        }
    };
    line1.appendChild(btn2);

    var line2 = document.createElement("DIV");
    line2.style.width = cal_width + "px";
    line2.style.height =  pane_height + "px";
    line2.style.backgroundColor = "#0FF";

    var btn3 = document.createElement("DIV");
    btn3.style.width = (cal_width/3 - 3) + "px";
    btn3.style.height = pane_height + "px";
    btn3.style.lineHeight = pane_height + "px";
    btn3.style.textAlign = "center";
    btn3.innerHTML = "<";
    btn3.style.cursor = "pointer";
    btn3.style.cssFloat = "left";
    btn3.onclick = function(){
        if(isValidated()){
            var old_month = parseInt(document.getElementById("input_month").value)
            if(old_month > 1){
                var year = parseInt(document.getElementById("input_year").value);
                var month = old_month - 1;
                var val = year + separator + month + separator + 1;
                init(val);
            }
            else {
                var year = parseInt(document.getElementById("input_year").value) - 1;
                var month = 12;
                var val = year + separator + month + separator + 1;
                init(val);
            }
        }
    };
    line2.appendChild(btn3);

    var input_month = document.createElement("INPUT");
    input_month.id = "input_month";
    input_month.style.width = (cal_width/3) + "px";
    input_month.style.height = "70%";
    input_month.style.cssFloat = "left";
    input_month.style.textAlign = "center";
    input_month.onchange = function(){
        changed();
    };
    line2.appendChild(input_month);

    var btn4 = document.createElement("DIV");
    btn4.style.width = (cal_width/3 - 3) + "px";
    btn4.style.height = pane_height + "px";
    btn4.style.lineHeight = pane_height + "px";
    btn4.style.textAlign = "center";
    btn4.innerHTML = ">";
    btn4.style.cursor = "pointer";
    btn4.style.cssFloat = "left";
    btn4.onclick = function(){
        if(isValidated()){
            var old_month = parseInt(document.getElementById("input_month").value)
            if(old_month < 12){
                var year = parseInt(document.getElementById("input_year").value);
                var month = parseInt(document.getElementById("input_month").value) + 1;
                var val = year + separator + month + separator + 1;
                init(val);
            }
            else {
                var year = parseInt(document.getElementById("input_year").value) + 1;
                var month = 1;
                var val = year + separator + month + separator + 1;
                init(val);
            }
        }
    };
    line2.appendChild(btn4);

    cal_body.appendChild(line1);
    cal_body.appendChild(line2);

    for(var i=0; i < 7; i++){
        var pane = document.createElement("DIV");
        pane.className = "pane";
        pane.style.width = pane_height + "px";
        pane.style.height = pane_height + "px";
        pane.style.lineHeight = pane_height + "px";
        pane.style.textAlign = "center";
        pane.style.cssFloat = "left";
        pane.innerHTML = days[i];
        cal_body.appendChild(pane);
    }
    init(calendar.value);
}

}

function init(val){
clearPane();

var cal_body = document.getElementById("cal_body");
var temp_date;
var year;
var month;
var date;

if(val == ""){
    temp_date = today;
    calendar.value = today.toFormatString(separator);
}
else{
    year = val.year();
    month = val.month(separator);
    date = val.date(separator);
    temp_date = new Date(year,month,date);
}

year = temp_date.getFullYear();
month = temp_date.getMonth() + 1;
date = temp_date.getDate();
temp_date.setDate(1);

var start = temp_date.getDay() + 7;
var end;

if(array_contain(month_big, month)){
    end = start + 31;
}
else if(array_contain(month_small, month)){
    end = start + 30;
}
else{
    if(isLeapYear(year)){
        end = start + 29;
    }
    else{
        end = start + 28;
    }
}

for(var i = 7; i < start; i++){
    var pane = document.createElement("DIV");
    pane.className = "pane";
    pane.style.width = pane_height + "px";
    pane.style.height = pane_height + "px";
    pane.style.lineHeight = pane_height + "px";
    pane.style.textAlign = "center";
    pane.style.cssFloat = "left";
    cal_body.appendChild(pane);
}

for(var i = start; i < end; i++){
    var pane = document.createElement("DIV");
    pane.className = "pane";
    pane.style.width = pane_height + "px";
    pane.style.height = pane_height + "px";
    pane.style.lineHeight = pane_height + "px";
    pane.style.textAlign = "center";
    pane.style.cssFloat = "left";
    pane.innerHTML = i - start + 1;
    pane.style.cursor = "pointer";
    pane.onmouseover = function(){
        this.style.backgroundColor = ‘#0FF‘;
    }
    if(date == (i - start + 1))
        pane.style.backgroundColor = ‘#0FF‘;
    else{
        pane.onmouseout = function(){
            this.style.backgroundColor = ‘‘;
        }
    }
    pane.onclick = function(){
        calendar.value = year + separator + month + separator + this.innerHTML;
        cal_body.parentNode.removeChild(cal_body);
    }
    cal_body.appendChild(pane);

    document.getElementById("input_year").value = year;
    document.getElementById("input_month").value = month;
}

}

//格式化输出
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学习资料的也可以私信我！
祝关注我的人都：身体健康，财源广进，福如东海,寿比南山，早生贵子，从不掉发!技术图片

java小项目之：教你做个聊天系统！(代码片段)

Java小项目之：聊天系统今天给大家带来的java练手小项目是一个简单的聊天室，界面简单，操作不难。分为注册系统，登录系统和聊天系统三部分，很适合java小白练手。完整的源码和素材请关注并私信我获取！界面展示：代码展... 查看详情

520到了，教你做个javaweb表白墙小项目

目录1.配置Maven项目1.1创建Maven项目1.2引入相关依赖1.3项目总结构2.约定前后端交互接口3.服务端代码3.1 创建Message类3.2创建工具类3.3添加信息类（AddMessage）3.4查询信息类（MessageList）4.前端代码5.创建数据库6.部署项... 查看详情

手把手教你做项目多线程篇——基础知识详解(代码片段)

多线程导读项目中多线程的目的实战操作小知识创建一个简单的线程守护线程主进程等待子进程结束共享全局变量的特性锁互斥锁信号量送点资源导读随着暑假的推进，手把手教你做项目前边的准备也差不多了后续的项目也... 查看详情

手把手教你做一个电子相册(代码片段)

1、概述首先介绍下什么是HaaS：2020年9月17日，在云栖大会上阿里云IoT团队正式发布了HaaS（HardwareasaServie）。HaaS是一种物联网设备云端一体开发框架，它的目的是通过数量收敛的硬件积木（比如主控板：... 查看详情

手把手教你做一个电子胸牌(代码片段)

关注+星标公众号，不错过精彩内容来源 | RT-Thread关注RT-Thread的同学肯定知道，RT-Thread为了向众多开发者展示RT-Thread的最新开发和生态建设成果，每年都会举办一场开发者大会(简称：RDC)，在2020年度的开发... 查看详情

手把手教你做爬虫---基于nodejs

前言：趁着北京今儿天气格外的蓝，我觉得我得干点什么，于是乎，卷起袖子，整理一下最近做爬虫的那些事儿。目标：爬取北京大学软件与微电子学院的所有新闻，并将内容及图片存储到本地。设计思路：经过对北京大学软件... 查看详情

手把手教你做项目web框架flask篇——基础用法详解(代码片段)

...的使用蓝图开发必备视图资源分享导读今天接着为暑假的项目做准备，最近一直做python类的总结所以我们的项目就从python开始吧，喜欢java的同学也不要气 查看详情

vue之手把手教你写日历组件

---恢复内容开始---1.日历组件1.分析功能：日历基本功能，点击事件改变日期，样式的改变1.结构分析：html1.分为上下两个部分2.上面分为左按钮，中间内容展示，右按钮下面分为周几展示和日期展示3.基本结构页面html书写<templa... 查看详情

手把手教你做javaweb项目：登录模块

现如今，无论是客户端还是移动端，无论是电动登陆还是社交平台登陆，无处不在的“登陆”。那么你知道怎么制作吗？今天就为你娓娓道来：用户登录在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用户的身... 查看详情

手把手教你做安豆计算器－计算器界面布局

...算器的模样。计算器界面是通过布局文件定义的。它位于项目的reslayoutactivity_main.xml文件中。这个布局文件通过java源代码MainActivity.java中的setContentView()函数，设置到界面上。@OverrideprotectedvoidonCr 查看详情

手把手教你做产品经理

...该如何让学习更有效率006真实产品案例-案例学习重点与项目背景007真实产品案例-大讨论与项目定调008真实产品案例-用户研究-问卷调查009真实产品案例-用户研究-问卷调查与访谈后的总结与心得010真实产品案例-用户研究-需求分... 查看详情

手把手教你做一个电子胸牌(代码片段)

关注+星标公众号，不错过精彩内容来源 | RT-Thread关注RT-Thread的同学肯定知道，RT-Thread为了向众多开发者展示RT-Thread的最新开发和生态建设成果，每年都会举办一场开发者大会(简称：RDC)，在2020年度的开发... 查看详情

手把手教你做一个缓存工具(代码片段)

...升使用体验。说到用缓存，那就会有人提出用redis，但是项目组认为项目紧急，不希望浪费时间到新的工具研究上，或虽然熟悉，但维护工作有成本 查看详情

手把手教你做蓝牙小车

...选择Arduino开发板1.2.1官方版本还是兼容版本Arduino是开源项目，硬件结构，软件设计都开源。所以不存在盗版的问题。官方版质 查看详情

javascript应用——手把手教你做一个页面化猜数字游戏

一听到猜数字游戏，想必大家都不太陌生吧？是的没错，很多人都用C语言或者Java写过猜数字游戏小程序，博主也不例外，之前写过C语言版本的猜数字游戏，感兴趣的同学可以看看C语言版本猜数字游戏。... 查看详情

手把手教你做项目mysql篇——从下载到命令总结(代码片段)

目录导读下载MySQL篇基础命令篇操作前的提示登录篇对数据库命令操作篇对表的操作删除表（这个单独说一下）对数据操作篇结尾送书导读有段时间没有好好整理文章了，这不是又该暑假啦嘛肥学准备在暑假来波大的&... 查看详情

几分钟教你做个原创视频，赚钱引流两不误

...代理真的把人请过来做广告。650)this.width=650;"alt="几分钟教你做个原创视频，赚钱引流 查看详情

极光小课堂|手把手教你做接口测试(代码片段)

接口测试是项目测试过程中非常重要的一环，测试的对象是接口，所以提早介入测试，对代码逻辑进行全面验证，就会更早的发现程序的问题。同时，接口测试比UI测试效率更高，并且更容易验证极端和异常的情况。那么什么是... 查看详情