欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

由Javascript实现的页面日历_时间日期

程序员文章站 2022-06-09 11:17:46
...
效果图:
由Javascript实现的页面日历_时间日期
CSS代码:
复制代码 代码如下:



脚本代码:
复制代码 代码如下:

");
var press_tag;
function changecal(action,year,month)
{
var strcal;
switch(action)
{
case "nextmonth":
if(month==11)
{
month = 1;
year = year*1 + 1;
}else{
month = month*1 + 2;
}
strcal = "> ";
break;
case "premonth":
if(month==0)
{
month = 12;
year = year*1 - 1;
}
strcal = " ";
break;
case "nextyear":
year = year*1 + 1;
month = month*1 + 1;
strcal = ">>";
break;
case "preyear":
year = year*1 - 1;
month = month*1 + 1;
strcal = "";
break;
default:;
}
strcal = " " + strcal + " ";
return(strcal);
}
function calender(cyear,cmonth)
{
var d,d_date,d_day,d_month;
//定义每月天数数组
var monthdates = ["31","28","31","30","31","30","31","31","30","31","30","31"]
d = new Date();
d_year = d.getYear(); //获取年份
//判断闰月,把monthdates的二月改成29
if (((d_year % 4 == 0) && (d_year % 100 != 0)) || (d_year % 400 == 0)) monthdates[1] = "29";
if ((cyear != "" ) || (cmonth != ""))
{
//如果用户选择了月份和年份,则当前的时间改为用户设定
d.setYear(cyear);
d.setMonth(cmonth-1);
d.setDate(1);
}
d_month = d.getMonth(); //获取当前是第几个月
d_year = d.getYear(); //获取年份
d_date = d.getDate(); //获取日期
//修正19XX年只显示两位的错误
if(d_year//===========输出日历===========
var str;
str = "";
str += "";
str += "";
str += "";
var firstday,lastday,totalcounts,firstspace,lastspace,monthdays;
//需要显示的月份共有几天,可以用已定义的数组来获取
monthdays = monthdates[d.getMonth()];
//设定日期为月份中的第一天
d.setDate(1);
//需要显示的月份的第一天是星期几
firstday = d.getDay();
//1号前面需要补足的的空单元格的数
firstspace = firstday;
//设定日期为月份的最后一天
d.setDate(monthdays);
//需要显示的月份的最后一天是星期几
lastday = d.getDay();
//最后一天后面需要空单元格数
lastspace = 6 - lastday;
//前空单元格+总天数+后空单元格,用来控制循环
totalcounts = firstspace*1 + monthdays*1 + lastspace*1;
//count:大循环的变量;f_space:输出前空单元格的循环变量;l_space:用于输出后空单元格的循环变量
var count,flag,f_space,l_space;
//flag:前空单元格输完后令flag=1不再继续做这个小循环
flag = 0;
for(count=1;count{
//一开始flag=0,首先输出前空单元格,输完以后flag=1,以后将不再执行这个循环
if(flag==0)
{
if(firstspace!=0)
{
for(f_space=1;f_space{
str += "";
if(f_space!= firstspace) count++;
}
flag = 1;
continue;
}
}
if((count-firstspace){
//输出月份中的所有天数
curday = d_year+","+(d_month*1+1)+","+(count - firstspace)+"|"
linkday = d_year+","+(d_month*1+1)+","+(count - firstspace)
var today = new Date();
if( (d_year == today.getYear()) && (d_month == today.getMonth()) && ((count-firstspace) == today.getDate()) )
{
//将本地系统中的当前天数高亮
str += "";
}else{
//不用高亮的部分,没有日志
str += "";
}
if(count%7==0)
{
if(count{
str += "
";
}else{
str += "";
}
}
}else{
//如果已经输出了月份中的最后一天,就开始输出后空单元格补足
for(l_space=1;l_space{
str += "";
if(l_space!= lastspace) count++;
}
continue;
}
}
str += "
"
str += changecal("preyear",d_year,d_month)
str += changecal("premonth",d_year,d_month)
str += d_year + " - " + (d_month*1+1)
str += changecal("nextmonth",d_year,d_month)
str += changecal("nextyear",d_year,d_month)
str += "
Su Mo Tu We Th Fr Sa
" + (count - firstspace) + "" + (count - firstspace) + "
www.sugood.cn
"
document.getElementById("calenderdiv").innerHTML = "
" + str + "
";
}
//调用函数
calender("","")
//-->

相关标签: 页面日历