- 浏览: 197953 次
- 性别:
- 来自: 湖南
文章分类
最新评论
日历写得太多,没有什么好说的,这个是能够保存备忘信息,具备闹钟功能的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 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); }
- js日历.rar (3.5 KB)
- 下载次数: 24
发表评论
-
万能js表单骓证
2011-05-09 13:17 929万能js表单骓证是一款比较好的表单js代码,你只需要了解基本用 ... -
ext-js基础
2011-04-25 22:43 1025javascript的关键字 关键 ... -
js 广告
2011-01-14 17:03 7061、悬浮页面流动广告(code.zip) 2、头部文横显隐广告 ... -
开始ExtJS
2011-01-12 15:27 26901、获得ExtJS 要使用ExtJS,那么首先要得到ExtJS ... -
DWR详解
2010-11-30 13:10 941什么是DWR(Direct Web Remote)? DWR是 ... -
万能日历制作
2010-01-15 13:33 1165万能日历制作: <!DOCTYPE HTML PUB ... -
垣克大战
2009-10-24 20:59 2468本面使用jquery-1.3.2和面定位map.jsp, ... -
俄罗斯方块
2009-09-29 20:35 14091.初始化下方块组合的图形阶面 //方块的大小 SQUARE ... -
javascript小甜饼_cookie方法
2009-09-24 19:28 791<!DOCTYPE html PUBLIC " ... -
javascript日历
2009-09-23 21:21 1156<!DOCTYPE html PUBLIC " ...
相关推荐
22_RTC实现带闹钟功能的日历.rar
好看的Android日历,里面有闹钟、提醒功能、记事功能等等
NULL 博文链接:https://zhangxinming.iteye.com/blog/506250
最简单的闹钟 js代码js带闹铃功能的倒计时代码
这个是多功能日历,能够实现显示年月日的基本功能,还具有显示校历,设置闹钟,更换图片背景等功能。
最简单的闹钟 js代码最简单的闹钟 js代码最简单的闹钟 js代码最简单的闹钟 js代码最简单最简单的闹钟 js代码最简单的闹钟 js代码最简单的闹钟 js代码最简单的闹钟 js代码最简单的闹钟 js代码最简单的闹钟 js代码最...
纯VHDL文件 拥有闹铃 整点报时 日历 使用方法(打开文件shizhong.gdf文件编译即可(本人使用maxplus))
NULL 博文链接:https://xing3956.iteye.com/blog/508325
编写程序以文件存储用户设置的闹铃信息,并实现闹钟功能。 2 要求及提示 2.1 程序执行过程 (1)该系统要求,具体功能有 ①设定闹铃时间; ②修改闹铃; ③取消闹铃; ④闹铃/停止闹铃。 (2)界面友好 有提示信息或...
初学单片机写的时钟日历,有闹钟功能和秒表功能。对于程序,欢迎大家给我指导指导
设计GUI界面的多功能日历。系统将日历、记事本、校历显示、时钟、设置闹钟、整点报时、设置图片背景等众多功能结合在一起,用户可以方便地在任何日期记录下有关内容或查看某个日期的记录内容,同时可以设置校历开始...
使用bs18b20、ds1302实现具有温度测量,可调闹钟的lcd1602显示的日历!
本程序是基于8051单片机,使用74Hc595 芯片是实现的多功能数字显示电子时钟,其中包含日历和闹钟
Android开发,读写日历功能,闹钟设置功能 开发demo
C#实现小闹钟,具备实时显示数字时钟的功能,具备实时绘制表盘时钟的功能,具备整点报时的功能,具备定点报时的功能,系统最小化
这是我之前刚开始学习C#做的一个小程序,源代码都在里面,可以直接运行 我用的framework3.5版本架构 程序包含了基本的日历功能,除此之外还有闹铃提醒功能,音乐(利用QQ音乐),天气(利用气象台公开的天气接口),...
基于51单片机带闹铃功能的数字钟设计.rar
精品软件工具--软件工程项目:电子日历系统主要功能为日历查看,闹钟,记事本,工具(截屏,更换壁纸)