javascript日历

最新推荐文章于 2025-07-09 12:31:18 发布

BINWEI01

最新推荐文章于 2025-07-09 12:31:18 发布

阅读量107

点赞数

文章标签： JavaScript prototype XHTML HTML ViewUI

本文介绍了一个简单的HTML日历应用程序，该程序使用JavaScript实现基本的日历功能，如显示当前日期、选择年份和月份等，并提供了记录事件的功能。此外，还介绍了如何通过Cookie保存用户的输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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" />
</head>
<style>
div{font-family:宋体;font-size:12px}
#sele{
margin:0 auto;
background-color:#ababab;
width:300px;
height:30px;
padding-top:10px;
}
#title{
margin:0 auto;
width:300px;
height:30px;
}
#tb{
margin:0 auto;
width:300px;
height:150px;
background-color:#aabb00
}
</style>
<body>
<div id="message" style="width:250px;height:150px;position:absolute;background-color:#fffffa;z-index:10;top:50px;left:300px;display:none">
您要记录的事情：
<textarea id="stort" cols="30" rows="7">
</textarea>
<input type="button" value="保存" id="saveButton" onclick="calendar.saveMessage()">
</div>
<div id="sele">
<select id="Year" id="selectYear" name="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>
</select>
<span id="nowTime"></span>时间<span id="time"></span>
<select id="Month" id="selectMonth" name="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>
</div>
<div id="title">
星期日星期一星期二星期三星期四星期五星期六
</div>
<div id="tb">
</div>
<div id="message" style="width:250px;height:150px;position:absolute;background-color:#fffffa;z-index:10;top:50px;left:370;display:none">
</div>
<div id="hiddendiv" style="display:none"></div>
<script type="text/javascript" src="CookieUtil.js"></script>
<script type="text/javascript">
function Calendar(){
this.inYear;
this.inMonth;
this.dates;
this.space;
}
function CurentTime(){
var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getTime() % 60000;
ss = (ss - (ss % 1000)) / 1000;
var clock = hh+':';
if (mm < 10) clock += '0';
clock += mm+':';
if (ss < 10) clock += '0';
clock += ss;
return(clock);
}
function Curent(){
document.getElementById("time").innerHTML=CurentTime();
var time=document.getElementById("time");
}
Calendar.prototype.setTitletime=function(){
var now=new Date();
var temp=now.toLocaleString();
var time=temp.substring(0,10);
document.getElementById("nowTime").innerHTML=time;
}
//判断闰年
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){
inMonth = inMonth - 1;
var leap_year = this.isLeapYear(inYear);
if(leap_year == true){
leap_year = 1;
}else{
leap_year = 0;
}
if(inMonth == 3 || inMonth == 5 || inMonth == 8 || inMonth == 10){
return 30;
}else if(inMonth == 1){
return 28 + leap_year;
}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.ContMonth=this.getNumberDaysInMonth(this.inYear,this.inMonth);
this.space=this.getNumberByMonth(this.inYear,this.inMonth);
this.dates=new Array(this.space+this.ContMonth);
for(var i=0; i<this.space;i++){
this.dates[i]="";
}
var count=1;
for(var j=this.space;j<this.ContMonth+this.space;j++){
this.dates[j]=count;
count++;
}

var count=0
var table = document.createElement("table");
table.id = "tdel";
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.dates.length){
td.attachEvent("onclick",calendar.clickDay);
td.attachEvent("ondblclick",calendar.dbclick);
td.innerHTML =this.dates[count++];
}
}

}
document.getElementById("tb").appendChild(table);
}

Calendar.prototype.init = function(){

}

Calendar.prototype.now = function(){
var time=new Date();
this.inYear=time.getFullYear();
this.inMonth=time.getMonth()+1;

}

Calendar.prototype.setYear = function(inYear){
this.inYear = inYear;
document.getElementById("tdel").removeNode(true);
this.space=0;
this.dates=null;
this.createTable();
}

Calendar.prototype.setMonth = function(inMonth){
this.inMonth = inMonth;
document.getElementById("tdel").removeNode(true);
this.space=0;
this.dates=null;
this.createTable();
}
Calendar.prototype.clickDay= function(){
var td=event.srcElement;
td.style.background="red";

}
Calendar.prototype.dbclick = function(){
document.getElementById("message").style.display = "block";
document.getElementById("hiddendiv").innerHTML=event.srcElement.innerHTML;
}
Calendar.prototype.saveMessage = function(){
var stort=document.getElementById("stort").innerHTML;
var days=document.getElementById("hiddendiv").innerHTML;
this.dayess=days;
var temp=this.inYear+this.inMonth+days;
var util = new CookieUtil();
util.createCookie(temp,stort,365);
//alert(util.readCookie(temp));
document.getElementById("message").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();
calendar.createTable();

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

}
setInterval('Curent()',1000);

</script>
</body>
</html>