JS简单实现移动端日历功能示例
本文实例讲述了JS简单实现移动端日历功能。分享给大家供大家参考，具体如下：
只是一个初步的简单的日历，有是否显示上月和下月部分的选项
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<metaname="apple-mobile-web-app-capable"content="yes">
<metaname="apple-mobile-web-app-status-bar-style"content="black">
<metaname="format-detection"content="telephone=no">
<title>移动端日历</title>
<styletype="text/css">
table{
width:100%;
border-collapse:collapse;
}
td{
padding:0;
margin:0;
vertical-align:middle;
text-align:center;
font-size:.7rem;
height:1.5rem;
}
.none{
display:none;
}
</style>
</head>
<body>
<divclass="calendar">
<tableclass="calendar_day">
<tr>
<td>星期日</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
</table>
<tableclass="calendar_date">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<scripttype="text/javascript">
vardate=newDate();
calendar(date,{lastandnext:true})
functioncalendar(setDate,options){
if(!options){
options={};
}
options.lastandnext=options.lastandnext||false;
//星期几部分
varcalendar_days=document.getElementsByClassName('calendar_day')[0];
vardays=calendar_days.getElementsByTagName('td');
vardate=newDate(setDate);
vary=date.getFullYear();
varm=date.getMonth();
vard=date.getDate();
//本月
//该月的第一天是星期几
varfirstDay=newDate(y,m,1).getDay();
//console.log(firstDay);
//该月一共多少天
varlastData=newDate(y,m+1,0).getDate();
//console.log(lastData)
//该月的最后一天是星期几
varlastDay=newDate(y,m+1,0).getDay();
//console.log(firstDay)
varcalendar_date=document.getElementsByClassName('calendar_date')[0];
vartds=calendar_date.getElementsByTagName('td');
//console.log(tds)
vared=firstDay;
for(vari=firstDay;i<lastData+firstDay;i++){
//console.log(i-firstDay+1)
tds[i].innerHTML=i-(firstDay)+1;
}
if(options.lastandnext){
////上月
varlastMonthData=newDate(y,m,0).getDate();
for(vari=firstDay-1;i>=0;i--){
tds[i].innerHTML=lastMonthData-(firstDay-i-1);
}
//下月
vark=0;
for(vari=lastData+firstDay;i<tds.length;i++){
k++;
tds[i].innerHTML=k;
}
}
}
</script>
<!--适配-->
<scripttype="text/javascript">
;(function(win,doc){
functionchange(){
doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/360+'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document);
</script>
</body>
</html>
PS：这里再为大家分享几款本站的在线日期工具供大家参考：
在线万年历日历：
http://tools.jb51.net/bianmin/wannianli
网页万年历日历：
http://tools.jb51.net/bianmin/webwannianli
在线万年历黄历flash版：
http://tools.jb51.net/bianmin/flashwnl
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。