具备闹钟功能的 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);
}
<!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>具备闹钟功能日历,,只支持ie :)</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;
this.util.createCookie(temp,store,365);
//隐藏输入栏
document.getElementById("savemessage").style.display = "none";
}
//取消;;
Calendar.prototype.canelMessage = function(){
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();
calendar.cookiekey = inYear+""+inMonth+""+inDay;
calendar.util = new CookieUtil();
var story = calendar.util.readCookie(calendar.cookiekey);
if(story != null){
document.getElementById("readstory").innerHTML = story;
document.getElementById("readmessage").style.display="block";
}
}
</script>
</body>
</html>
分享到：
相关推荐
【标题】：“具备闹钟功能js日历”是一款基于JavaScript实现的日历插件，它集成了闹钟功能，能够帮助用户在特定日期设置提醒，从而提高时间管理的效率。这款日历工具通常适用于网页应用，可以方便地集成到网页中，...
日历功能可能通过JavaScript和CSS实现，JavaScript可以处理用户的交互，如选择日期，而CSS则用于美化日历的展示。可能还会用到HTML5的`<input type="date">`元素或者自定义的日历组件库，如FullCalendar或Bootstrap ...
接下来，闹钟程序的闹铃选择功能意味着用户可以选择不同的铃声。这通常涉及到音频文件的管理，如MP3、WAV等格式。开发者需要编写代码来加载、播放和停止音频文件，可能还需要实现音量控制。在iOS和Android平台上，有...
"好用的 日历插件 带时分秒"这样的描述指向了一个具备详细时间显示功能的日历组件，通常这种插件不仅提供日期选择，还支持小时、分钟甚至秒的精确选择，非常适合需要精确安排时间的用户。外观好看和实用则是对这类...
- Web应用：HTML5的`<input type="date">`提供基本的日历功能，更高级的可以使用JavaScript库，如FullCalendar、jQuery UI Datepicker等。 - 移动应用：Android和iOS都提供了内置的日历API，开发者可以通过这些...
自己制作的多功能定时器，不仅满足了基本的计时需求，还具备预设和报警功能，使得它更加实用和灵活。这个项目展示了编程和软件设计的创新应用。 首先，我们要理解定时器的基本原理。定时器通常是通过编程语言中的...
至于压缩包中的"日历js控件"，这可能是其中一款控件的源代码或者示例文件。开发者可以通过查看这些文件来学习控件的实现方式，包括HTML结构、CSS样式和JavaScript逻辑，以便于理解和自定义这些控件，或者在自己的...
2. **自定义控件**：开发者可以选择创建自定义控件，通过CSS/JS（如React Native、Vue.js等框架）或Java/Kotlin（Android）和Swift/Objective-C（iOS）进行编程，实现更个性化的界面和交互。 3. **第三方库**：许多...
为了实现这些时间选择器，开发者应具备基本的HTML、CSS和JavaScript知识，了解jQuery和Vue.js框架，熟悉相关插件的API。此外，对响应式设计的理解也很重要，确保时间选择器在不同设备和屏幕尺寸上都能正常工作。最后...
常见的应用场景包括日历应用、表单填写、闹钟设置等。这类组件应该具备良好的用户体验，易于操作，同时还需要支持各种格式的展示，如24小时制、12小时制，并能处理AM/PM的切换。 时间组件的实现通常基于JavaScript...