fly-sky 发表于 2013-2-1 11:57:14

具备闹钟功能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]
查看完整版本: 具备闹钟功能js日历