具备闹钟功能js日历
日历写得太多，没有什么好说的，这个是能够保存备忘信息，具备闹钟功能的js日历。具体实现如下：
日历面目
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>simple</title><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><style type="text/css"> div{ font-size: 12px; } #title{ /*宽高 居中 背景*/ width:315px; height:30px; margin:0 auto; padding-top:5px; background-color:#ababab; } #days{ /*宽高 居中 背景*/ width:315px; height:30px; margin:0 auto; word-spacing:3px; padding-top:5px; } #tb{ /*宽高 居中 背景*/ width:315px; height:150px; margin:0 auto; background-color:#aabb00; }</style></head><body><div id="dayhidden" style="display:none"></div><div id="savemessage" style="width:250px;height:150px;position:absolute;background-color:#fffffa;z-index:10;top:50px;left:370px;display:none"> 您今天要记录事情! <textarea cols="35" rows="6" id="savestory"> </textarea> <input type="button" value="保存" id="saveButton" onclick="calendar.saveMessage();"/></div><div id="readmessage" style="width:250px;height:150px;position:absolute;background-color:#fffffa;z-index:10;top:50px;left:370px;display:none"> 您今天要记录事情! <textarea cols="35" rows="6" id="readstory"> </textarea> <input type="button" value="取消" id="saveButton" onclick="calendar.canelMessage();"/></div><div id="title"><!--年下拉列表 start--><select name="selectYear" id="selectYear" onchange="calendar.setYear(document.all.selectYear.value);"> <option value="2000">2000年</option> <option value="2001">2001年</option> <option value="2002">2002年</option> <option value="2003">2003年</option> <option value="2004">2004年</option> <option value="2005">2005年</option> <option value="2006">2006年</option> <option value="2007">2007年</option> <option value="2008">2008年</option> <option value="2009">2009年</option> <option value="2010">2010年</option> <option value="2011">2011年</option> <option value="2012">2012年</option></select><!--年下拉列表 end-->当前日期<span id="currentTime"></span><!--月下拉列表 start--><select name="selectMonth" id="selectMonth" onchange="calendar.setMonth(document.all.selectMonth.value)"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4">4月</option> <option value="5">5月</option> <option value="6">6月</option> <option value="7">7月</option> <option value="8">8月</option> <option value="9">9月</option> <option value="10">10月</option> <option value="11">11月</option> <option value="12">12月</option></select><!--月下拉列表 end--></div><div id="days"> 星期日 星期一 星期二 星期三 星期四 星期五 星期六 </div><div id="tb"></div><script type="text/javascript" src="CookieUtil.js"></script><script type="text/javascript"> //具备闹钟功能日历//////如果用户,,cookie 删除 :)////////类，属性，方法，创建对象，工作调;;;//相当于创建Calendar类..function Calendar(){ //年 this.inYear; //月 this.inMonth; //这个月天数 this.inMonthCount; //这个月是星期几 this.inSpace; //数组 this.days; //保存一双击天数 this.dbldays; //当前cookiekey this.cookiekey; //cook工具; this.util;}//下面写一个方法完成符值;Calendar.prototype.setTitleTime = function(){ var now = new Date(); var temp = now.toLocaleString(); var newtime = temp.substring(0,15); document.getElementById("currentTime").innerHTML = newtime; }//分析javascript 类;;;Date //星期日0//星期一1//...//星期六6//------------//年 2003//-----------//月//一月 0//二月 1//...//十二月11//===============//1-31//判断闰年Calendar.prototype.isLeapYear = function(inYear){ if((inYear % 4 == 0 && !(inYear % 100 == 0)) || (inYear % 400 == 0)){ return true; }else{ return false; }}//判断这个月有多少天数Calendar.prototype.getNumberDaysInMonth = function(inYear,inMonth){//月份差1//1 2 3 4 5 6 7 8 9 10 11 12//0 1 2 3 4 5 6 7 8 9 10 11inMonth = inMonth - 1;//4月 30 //6月 30//9月 30//11月 30var leapYear = 0;//=====================??//怎么不同方法var rsLeapYear = this.isLeapYear(inYear);if(rsLeapYear == true){ leapYear = 1;}//平年28天,闰年29天...if(inMonth == 1){ return 28 + leapYear;}if(inMonth == 3 || inMonth == 5 || inMonth == 8 || inMonth == 10){ return 30;}else{ return 31;}}//判断这个月1号是星期几Calendar.prototype.getNumberByMonth = function(inYear,inMonth){ inMonth = inMonth - 1; var timeDay = new Date(inYear,inMonth,1); return timeDay.getDay();}//创建一个表;;Calendar.prototype.createTable = function(){ this.inMonthCount = this.getNumberDaysInMonth(this.inYear,this.inMonth); //一号星期;; this.inSpace = this.getNumberByMonth(this.inYear,this.inMonth); //创建数据组;; this.days = new Array(this.inSpace + this.inMonthCount);//加入空格for(var i = 0 ; i < this.inSpace ;i++){ this.days[i] = "";}//天数;var count = 1;for(var j = this.inSpace;j < this.inMonthCount+this.inSpace;j++){ this.days[j] = count;count++;}//=======================================================var count = 0; //创建表节点 //42 格;;;28 2 30 var table = document.createElement("table");table.border = "1px";table.id = "tdelete"; //6行 for(var i = 0 ; i < 6;i++){ var tr = table.insertRow(i); //7列 for(var j = 0 ; j < 7;j++){ var td = tr.insertCell(j); td.width = "40px"; if(count < this.days.length){ // //注册单击事件 //p219 //td.attachEvent("onclick",calendar.clickDay);td.attachEvent("ondblclick",calendar.dbclick); td.innerHTML = this.days[count++]; } } } document.getElementById("tb").appendChild(table);}//初始化方法;;Calendar.prototype.init = function(){}Calendar.prototype.now = function(){ //================================== //当现日期 var currentDate = new Date(); //年 this.inYear = currentDate.getFullYear(); //月 this.inMonth = currentDate.getMonth() + 1; this.createTable();}//年Calendar.prototype.setYear = function(inYear){ this.inYear = inYear; //======================= //消空 //表删除 //数组空 //space空 document.getElementById("tdelete").removeNode(true); //清空值 this.inSpace = 0; //数组 this.days = null; this.createTable();}//月Calendar.prototype.setMonth = function(inMonth){this.inMonth = inMonth;document.getElementById("tdelete").removeNode(true); //清空值 this.inSpace = 0; //数组 this.days = null; ///创建表;;this.createTable();}//==========================================//事件Calendar.prototype.clickDay = function(){ //ie产生一个event //alert(event.srcElement.innerHTML); var td = event.srcElement; td.style.background = "red";}//显示输入框 Calendar.prototype.dbclick = function(){ document.getElementById("dayhidden").innerHTML = event.srcElement.innerHTML; document.getElementById("savemessage").style.display = "block";}//Calendar.prototype.saveMessage = function(){ //先用户输入事情取; var store = document.getElementById("savestory").innerHTML; var days = document.getElementById("dayhidden").innerHTML; //当前天 //当ie ,,双击 ie event. //当前月 //当前年 var temp = this.inYear+""+this.inMonth+""+days; alert("写入"+temp); //保存在cookid; util.createCookie(temp,store,365); //alert(util.readCookie(temp)); //隐藏输入栏 document.getElementById("savemessage").style.display = "none";}//取消;;Calendar.prototype.canelMessage = function(){ this.util = new CookieUtil(); var currentDate = new Date(); inYear = currentDate.getFullYear(); inMonth = currentDate.getMonth() + 1; inDay = currentDate.getDate(); this.cookiekey = inYear+""+inMonth+""+inDay; this.util.eraseCookie(this.cookiekey); document.getElementById("readmessage").style.display="none";}//全局变量。。 var calendar = new Calendar();window.onload = function(){ calendar.setTitleTime(); calendar.now(); var currentDate = new Date(); inYear = currentDate.getFullYear(); inMonth = currentDate.getMonth() + 1; inDay = currentDate.getDate(); this.cookiekey = inYear+""+inMonth+""+inDay; this.util = new CookieUtil(); var story = this.util.readCookie(this.cookiekey); //alert("读取"+this.cookiekey+":"+story); if(story != null){ document.getElementById("readstory").innerHTML = story; document.getElementById("readmessage").style.display="block"; }}</script></body></html>//cookie工具类function CookieUtil(){}//写CookieCookieUtil.prototype.createCookie = function(name,value,days){ if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; var temp = name+"="+value+expires+"; path=/";document.cookie = temp;} //读CookieCookieUtil.prototype.readCookie = function(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null;} //清CookieCookieUtil.prototype.eraseCookie = function(name){ this.createCookie(name,"",-1);}