JS简单实现移动端日历功能示例
更新时间：2016年12月28日 14:08:42 作者：xlei1123
这篇文章主要介绍了JS简单实现移动端日历功能的方法,涉及javascript针对日期与时间的操作及显示相关技巧,需要的朋友可以参考下
本文实例讲述了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：这里再为大家分享几款本站的在线日期工具供大家参考：
在线万年历日历：
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程序设计有所帮助。
相关文章
这篇文章主要给大家介绍了关于iframe跨域POST提交的相关资料,文中给出了详细的介绍与示例代码，相信对大家的学习或者工作具有一定的参考借鉴价值，需要的朋友可以一起来学习学习。2017-01-01
js控制台报错Uncaught TypeError: Cannot read p
本文主要介绍了js控制台报错Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild‘)的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
哈希表（也称为哈希表）是一种基于键直接访问内存存储位置的数据结构。也就是说，它通过计算一个键值函数来加速查找，该函数将要查询的数据映射到表中的某个位置。该映射函数称为散列函数，记录数组称为散列表2022-09-09
js 创建一个浮动div的代码，一般用来指导用户下面的操作与多条件选择。点击一下就可显示，具体的大家可以自由发挥。2009-12-12
采用CSS覆盖的方法就可以了，但是官方是不允许这么做的，具体实现如下，感兴趣的朋友可以参考下2013-09-09![JavaScript输出为[object Object]问题的解决办法](//img.jbzj.com/images/xgimg/bcimg5.png)
JavaScript输出为[object Object]问题的解决办法
平时我们在接收后端返回的json对象通常是一个字符串类型的object,所以一般我们要对这个object进行类型转化后,我们才能使用object里面的数据,这篇文章主要给大家介绍了关于JavaScript输出为[object Object]问题的解决办法,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于Javascript中Cookie的获取和保存应用的相关资料,Cookie是直接存储在浏览器中的一小串数据,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-09-09
在页面中循环添加到select中，但是在ie8中就一直提示 缺少id未定义，经测试发现数组的最后多了个逗号，把逗号去掉就好了2014-03-03
JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同的Json配置文件，可以对小程序项目进行不同级别的配置2022-10-10
下面小编就为大家带来一篇浅谈JavaScript中变量和函数声明的提升。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
![JavaScript输出为[object Object]问题的解决办法](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论