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

最新推荐文章于 2021-02-28 14:05:51 发布

Tyloo_wdnmd

最新推荐文章于 2021-02-28 14:05:51 发布

阅读量548

点赞数

本文链接：https://blog.csdn.net/Tyloo_wdnmd/article/details/104444479

版权

本文介绍了如何使用Java创建一个简单的电子日历。通过HTML和JavaScript实现日历的展示和交互，包括日期的格式化、闰年判断等功能。读者可以通过这篇文章学习到基本的日历制作技巧。

摘要由CSDN通过智能技术生成

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);

    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");

最低0.47元/天解锁文章

Tyloo_wdnmd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java小项目之：教你做电子日历！

Java小项目之：教你做电子日历！<!doctype html>日历控件var days = new Array(“日”,“一”,“二”,“三”,“四”,“五”,“六”);//星期var today = new Date();//当天日期，备用var month_big = new Array(“1”,“3”,“5”,“7”,“8”,“10”,“12”); ...
复制链接

扫一扫