具备闹钟功能js日历

最新推荐文章于 2022-02-04 10:54:32 发布

iteye_8614

最新推荐文章于 2022-02-04 10:54:32 发布

阅读量188

点赞数

分类专栏： ajax 文章标签： prototype IE C C++ C#

本文链接：https://blog.csdn.net/iteye_8614/article/details/82057722

版权

ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

日历写得太多，没有什么好说的，这个是能够保存备忘信息，具备闹钟功能的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 11
inMonth = inMonth - 1;
//4月 30 
//6月   30
//9月   30
//11月  30
var 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>

js工具类：


//cookie工具类
function CookieUtil(){
}

//写Cookie
CookieUtil.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;
}
 //读Cookie
CookieUtil.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;
}
 //清Cookie
CookieUtil.prototype.eraseCookie = function(name)
{
    this.createCookie(name,"",-1);
}

iteye_8614

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
具备闹钟功能js日历

日历写得太多，没有什么好说的，这个是能够保存备忘信息，具备闹钟功能的js日历。具体实现如下：日历面目[code="html"]simple div{ font-size: 12px; } #title{ /*宽高居中背景*/ width:315px; height:30px; margin:0 auto; ...
复制链接

扫一扫

专栏目录