javascript版日历(有小闹钟功能)-JavaScript-WEB前端-六狼论坛-IT论坛-计算机论坛

cumquat 发表于 2013-1-23 02:26:36

javascript版日历(有小闹钟功能)

<!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>日历</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<style type="text/css">
div{font-size:12px;}

   #title{
   /*宽高居中背景*/
     width:300px;
height:30px;
margin:0 auto;
padding-top:10px;
background-color:#C8E3FF;
color:#330099;
   }

   #days{
   /*宽高居中背景*/
     width:300px;
height:30px;
margin:0 auto;
background-color:#0080FF; /* 背景颜色蓝色 */
font-size:9pt;    /* 字体大小 9pt */
Color:White;      /*字体颜色白色*/
word-spacing:2px;
padding-top:5px;
   }

   #tb{
   /*宽高居中背景*/
     width:300px;
height:130px;
margin:0 auto;
background-color:#3399FF;
text-align:center;
   }

   #w{
     width:300px;
height:30px;
margin:0 auto;
text-align:center;
background-color:#3399FF;
    }

</style>

</head>

<body>


<div id="dayhidden" style="display:none"></div>


<div id="savemessage" style="width:250px;height:150px;position:absolute;color:red;background-color:#fffffa;z-index:10;top:230px;left:460px;display:none">
您要记录的事情!
<textarea cols="35" rows="6" id="savestory">
</textarea>

<input type="button" value="保存" id="saveButton" />

<input type="button" value="取消"/>
</div>


<div id="readmessage" style="width:250px;height:150px;position:absolute;color:red;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">

&nbsp;&nbsp;请选择您要查看的年、月:

<span id="currentTime"></span>


     <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" selected="selected">2009年</option>
<option value="2010">2010年</option>
</select>
     

     
<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" selected="selected">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>




</div>

<div id="days">
星期日
星期一
星期二
星期三
星期四
星期五
星期六
</div>

<div id="tb">
</div>

<div id="w">
     当前时间: <span id="st"></span>
</div>






<script type="text/javascript" src="CookieUtil.js"></script>

<script type="text/javascript">
   //类，属性，方法，创建对象，工作调;;;
   //相当于创建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();
// alert(temp);
var newtime = temp.substring(0,12);
// alert(newtime);
document.getElementById("currentTime").innerHTML = newtime;
   }


   //判断闰年
   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;
}
// if(inMonth == 0 || inMonth == 2 || inMonth == 4 || inMonth == 6 || inMonth == 7 || inMonth == 9 || inMonth == 11){
             //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;
      //创建表节点
var table = document.createElement("table");
      table.border = "1px"; /*表格边框*/
      table.style.background = "white"; //表格背景颜色.
      table.style.borderColor = "red";
      table.id = "tdelete"; /* 给表设一个 id */

//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){

//
//注册单击事件
//ajax讲义 p219页

//鼠标双击事件
td.attachEvent("ondblclick",calendar.dbclick);
//鼠标移动事件
td.attachEvent("onmousemove",calendar.mouseMov);
//鼠标离开事件
td.attachEvent("onmouseout",calendar.mouseOut);

//
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(); // alert(this.inYear);
//月
this.inMonth = currentDate.getMonth() + 1; // alert(this.inMonth);

this.createTable();

   }

   //年
   Calendar.prototype.setYear = function(inYear){
      this.inYear = inYear;

//=================
//删除表
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.mouseMov = function(){
var tdMov=event.srcElement;
// tdMov.style.border="1px inset";
tdMov.style.background="#3399FF";
//alert("111");
}
//鼠标离开事件
Calendar.prototype.mouseOut = function(){
var tdOut=event.srcElement;
// tdOut.style.border="1px ridge";
tdOut.style.background="#ffffff";
//alert("111");
}

//-----------------------双击 alert 一个记事框--------------------------------

   // 保存
   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 + " 要提醒的事情");

//保存在cookie
var util = new CookieUtil();
util.createCookie(temp,store,365);
// alert(util.readCookie(temp));

// 隐藏输入栏
document.getElementById("savemessage").style.display = "none";
   }

   // 取消
   Calendar.prototype.exitMessage = function(){
document.getElementById("savemessage").style.display = "none";
}

// hou 取消;;
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";

}

Calendar.prototype.setTime = function(){

   // 非常重要的变量，计时器，对象，地址，清楚计划，地址
   var timer;
   var cur = new Date().getTime(); // 当前时间
     // 在span 显示当前时间
// toLocaleString() 本地时间格式
      document.getElementById("st").innerHTML = new Date().toLocaleString();

// 判断时间
timer = window.setInterval("setTime();",1000);
   }
   // 指定隔l秒执行一次


//===============================================================================

var calendar = new Calendar();

//calendar.setTitleTime();
calendar.now();
calendar.setTime();

window.onload = function(){

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

}

//alert(calendar.isLeapYear(2008));
//alert(calendar.getNumberDaysInMonth(2009,6));
//alert(calendar.getNumberByMonth(2009,10,1));
</script>



<script type="text/javascript">

   function setTime(){

   // 非常重要的变量，计时器，对象，地址，清楚计划，地址

     // 在span 显示当前时间
// toLocaleString() 本地时间格式
     document.getElementById("st").innerHTML = new Date().toLocaleString();

   }
   // 指定隔l秒执行一次
    timer = window.setInterval("setTime();",1000);

</script>

</body>
</html>

页: [1]

六狼论坛's Archiver

javascript版日历(有小闹钟功能)