具备闹钟功能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" /></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" /></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;//当前cookiekeythis.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 = "";}//天数;var count = 1;for(var j = this.inSpace;j < this.inMonthCount+this.inSpace;j++){ this.days = 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; } } } 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 = newCookieUtil(); 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 = newCookieUtil(); 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>
js工具类:
//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; 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);}
页:
[1]