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