JS简单实现移动端日历功能示例
程序员文章站
2022-05-07 16:06:25
本文实例讲述了js简单实现移动端日历功能。分享给大家供大家参考，具体如下：
只是一个初步的简单的日历，有是否显示上月和下月部分的选项
本文实例讲述了js简单实现移动端日历功能。分享给大家供大家参考，具体如下：
只是一个初步的简单的日历，有是否显示上月和下月部分的选项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name = "format-detection" content = "telephone=no">
<title>移动端日历</title>
<style type="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>
<div class="calendar">
<table class="calendar_day">
<tr>
<td>星期日</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
</table>
<table class="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>
<script type="text/javascript">
var date = new date();
calendar(date,{lastandnext:true})
function calendar (setdate,options){
if (!options) {
options = {};
}
options.lastandnext = options.lastandnext || false;
// 星期几部分
var calendar_days = document.getelementsbyclassname('calendar_day')[0];
var days = calendar_days.getelementsbytagname('td');
var date = new date(setdate);
var y = date.getfullyear();
var m = date.getmonth();
var d = date.getdate();
// 本月
// 该月的第一天是星期几
var firstday = new date(y,m,1).getday();
// console.log(firstday);
// 该月一共多少天
var lastdata = new date(y,m+1,0).getdate();
// console.log(lastdata)
// 该月的最后一天是星期几
var lastday = new date(y,m+1,0).getday();
// console.log(firstday)
var calendar_date = document.getelementsbyclassname('calendar_date')[0];
var tds = calendar_date.getelementsbytagname('td');
// console.log(tds)
var ed = firstday;
for (var i = firstday; i < lastdata+firstday; i++) {
// console.log(i-firstday+1)
tds[i].innerhtml= i-(firstday)+1;
}
if(options.lastandnext){
// // 上月
var lastmonthdata = new date(y,m,0).getdate();
for(var i = firstday-1; i >= 0; i--){
tds[i].innerhtml= lastmonthdata-(firstday-i-1);
}
// 下月
var k = 0;
for(var i = lastdata+firstday; i < tds.length; i++){
k++;
tds[i].innerhtml= k;
}
}
}
</script>
<!-- 适配 -->
<script type="text/javascript">
;(function(win, doc){
function change(){
doc.documentelement.style.fontsize=20*doc.documentelement.clientwidth/360+'px';
}
change();
win.addeventlistener('resize', change, false);
})(window, document);
</script>
</body>
</html>
ps：这里再为大家分享几款本站的在线日期工具供大家参考：
在线万年历日历：
网页万年历日历：
在线万年历黄历flash版：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript时间与日期操作技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。