js简单日历代码？js日历控件
大家好，今天给各位分享js简单日历代码的一些知识，其中也会对js日历控件进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
求一款js做的时间日历控件
这是我找到的一个js做的日历，不知道是不是你要的，里面有包含时间，其实在日历里面加时间也是比较简单的，只要调用DATE的方法就可以了，希望对你有用。下面是代码段，效果图附上。
<html>
<head>
<SCRIPTLANGUAGE="JavaScript"TYPE="text/javascript">
//定义月历函数
functioncalendar(){
vartoday=newDate();//创建日期对象
year=today.getYear();//读取年份
thisDay=today.getDate();//读取当前日
//创建每月天数数组
varmonthDays=newArray(31,28,31,30,31,30,31,31,30,31,30,31);
//如果是闰年，2月份的天数为29天
if(((year%4==0)&&(year%100!=0))||(year%400==0))monthDays[1]=29;
daysOfCurrentMonth=monthDays[today.getMonth()];//从每月天数数组中读取当月的天数
firstDay=today;//复制日期对象
firstDay.setDate(1);//设置日期对象firstDay的日为1号
startDay=firstDay.getDay();//确定当月第一天是星期几
//定义周日和月份中文名数组
vardayNames=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
varmonthNames=newArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
//创建日期对象
varnewDate=newDate();
//创建表格
document.write("<TABLEBORDER='0'CELLSPACING='0'CELLPADDING='2'ALIGN='CENTER'BGCOLOR='#0080FF'>")
document.write("<TR><TD><tableborder='0'cellspacing='1'cellpadding='2'bgcolor='#88FF99'>");
document.write("<TR><thcolspan='7'bgcolor='#C8E3FF'>");
//显示当前日期和周日
document.writeln("<FONTSTYLE='font-size:9pt;Color:#FF0000'>"+newDate.getYear()+"年"+monthNames[newDate.getMonth()]+""+newDate.getDate()+"日"+dayNames[newDate.getDay()]+"</FONT>");
//显示月历表头
document.writeln("</TH></TR><TR><THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>日</FONT></TH>");
document.writeln("<thbgcolor='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>一</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>二</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>三</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>四</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>五</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>六</FONT></TH>");
document.writeln("</TR><TR>");
//显示每月前面的"空日"
column=0;
for(i=0;i<startDay;i++){
document.writeln("<TD><FONTSTYLE='font-size:9pt'></FONT></TD>");
column++;
}
//如果是当前日就突出显示(红色)，否则正常显示(黑色)
for(i=1;i<=daysOfCurrentMonth;i++){
if(i==thisDay){
document.writeln("</TD><TDALIGN='CENTER'><FONTSTYLE='font-size:9pt;Color:#ff0000'><B>")
}
else{
document.writeln("</TD><TDBGCOLOR='#88FF99'ALIGN='CENTER'><FONTSTYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000'>");
}
document.writeln(i);
if(i==thisDay)document.writeln("</FONT></TD>")
column++;
if(column==7){
document.writeln("<TR>");
column=0;
}
}
document.writeln("<TR><TDCOLSPAN='7'ALIGN='CENTER'VALIGN='TOP'BGCOLOR='#0080FF'>")
document.writeln("<FORMNAME='time'onSubmit='0'><FONTSTYLE='font-size:9pt;Color:#ffffff'>")
//显示当前时间
document.writeln("当前时间:<INPUTTYPE='Text'NAME='textbox'ALIGN='TOP'></FONT></TD></TR></TABLE>")
document.writeln("</TD></TR></TABLE></FORM>");
}
</SCRIPT>
<SCRIPTLANGUAGE="JavaScript">
//初始化控制变量
vartimerID=null;
vartimerRunning=false;
//定义时间显示函数
functionstoptime(){
if(timerRunning)
clearTimeout(timerID);
timerRunning=false;}
//定义显示时间函数
functionshowtime(){
varnewDate=newDate();
varhours=newDate.getHours();
varminutes=newDate.getMinutes();
varseconds=newDate.getSeconds()
vartimeValue=""+((hours>12)?hours-12:hours)
timeValue+=((minutes<10)?":0":":")+minutes
timeValue+=((seconds<10)?":0":":")+seconds
timeValue+=(hours>=12)?"下午":"上午"
document.time.textbox.value=timeValue;
timerID=setTimeout("showtime()",1000);//设置超时,使时间动态显示
timerRunning=true;}
//显示当前时间
functionstarttime(){
stoptime();
showtime();}
</SCRIPT>
</head>
<BODYonLoad="starttime()"TEXT="#000000"TOPMARGIN="0">
<scriptlanguage="JavaScript"type="text/javascript">
calendar();//显示月历
</script>
</BODY>
</html>
js实现手机屏幕滑动日历整月功能
可以使用JavaScript结合HTML和CSS来实现手机屏幕上的滑动日历整月功能。
实现步骤基础概念：
触摸事件：用于捕捉用户的滑动操作，如touchstart、touchmove、touchend。
日期对象：JavaScript中的Date对象用于处理日期和时间。
动画效果：通过CSS或JavaScript实现平滑的滑动动画。
HTML结构：
创建一个包含日历容器的结构，用于放置动态生成的日期项。
CSS样式：
设置日历容器的样式，包括宽度、高度、溢出隐藏和动画效果，确保日历项在容器内正确显示，并添加平滑的滑动动画。
JavaScript逻辑：
初始化日期，生成当前月份的日期项。
监听触摸事件，根据用户的滑动操作来计算滑动的距离和方向，从而确定用户想要查看的月份。
根据用户滑动的月份动态更新日期项，确保日历项正确反映该月的日期。
注意事项滑动逻辑：在实现滑动逻辑时，需要准确计算滑动的方向和距离，以确定用户想要查看的月份。日期更新：日期的动态生成需要根据用户滑动的月份进行更新，确保日历项正确无误。用户体验：可以使用CSS动画效果来增强用户体验，使滑动过程更加平滑和自然。通过上述步骤，你可以实现一个手机屏幕上的滑动日历整月功能，并根据实际需求进一步优化和扩展该功能。
如何用JS写一个日历
首先必须解决的问题是表格的行与列问题。列是固定的，七列，因为一周有七天。行需要动态计算，因为，每一个月的第一天是星期几是一个变数，因而第一天在表格中的第几个单元也就跟着变化，同时，每个月的总天数不一致也影响着各个月对表格行数的需要量。
一.表格的行数问题
1.首先取得处理月的总天数
JS不提供此参数，我们需要计算。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：
function is_leap(year){
return(year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
接着定义一个包含十二个月在内的月份总天数的数组：
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
m_days这个数组里，二月份的天数已经加入闰年的信息：28+is_leap(ynow)。数组元素从0开始，正好对应于JS提供的Date函数提供的getMonth返回值，即0表示一月，1表示二月，2表示三月，依此类推。
这样，各月总数可以这样取得：m_days[x]。其中，x为0至11的自然数。
2.计算处理月第一天是星期几
可以使用Date函数的getDay取得，返回的值从0到6，0表示星期一，1表示星期二，2表示星期三，其余依此类推。代码如下（假设要处理的时间为2008年3月）：
n1str=new Date(2008,3,1);
firstday=n1str.getDay();
有了月总天数和该月第一天是星期几这两个已知条件，就可以解决表格所需行数问题：（当前月天数+第一天是星期几的数值）除以七。表格函数需要整数，因此，我们使用Math.ceil来处理：
tr_str=Math.ceil((m_days[mnow]+ firstday)/7);
表格中的tr标签实际上代表表格的行，因此变量tr_str是我们往下写表格的重要依据。
二.打印日历表格
可以使用两个for语句嵌套起来实现：外层for语句写行，内层for语句写单元格。
for(i=0;i<tr_str;i++){//外层for语句- tr标签
document.write("<tr>");
for(k=0;k<7;k++){//内层for语句- td标签
idx=i*7+k;//表格单元的自然序号
date_str=idx-firstday+1;//计算日期
//这里是处理有效日期代码
}//内层for语句结束
document.write("</tr>");
}//外层for语句结束
单元格的自然序号是否代表有效日期非常关键，为此必须加入一个过滤机制：仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。
OK，本文到此结束，希望对大家有所帮助。