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：这里再为大家分享几款本站的在线日期工具供大家参考：
在线万年历日历：
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程序设计有所帮助。
相关推荐
-
js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe
-
javascript实现的简易的DatePicker日历
jQ的ui有,YUI的widget里也有.而且也封装的结结实实,兼容性,通用性,都做得挺好.于是在代码完善的同时,代码量自然也不会少.即使建立在基础库之上,代码也是好几百行. 真正使用的时候可能并不需要这么完善的功能.咱们就写个简陋点的东西,够自己用就行了. 而且以前有朋友提出我发的东西都是一些娱乐货,没有什么实用性,这次就当是个开始,抛个砖,以后时不时发个带一些实用性的东东. <!-- 以下demo没有什么出彩的地方,仅供有需要的朋友看看 --> DatePicker .date-picke
-
修改js Calendar日历控件 兼容IE9/谷歌/火狐
修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. 复制代码 代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为 复制代码 代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码 代码如下: var a = (arguments.length==0)
-
javascript写的日历类(基于pj)
先看看效果: 复制代码 代码如下: <script type="text/javascript" src="http://users4.Jabry.com/pengju/src/pj-2.1.1.mini.js"></script> <script type="text/javascript" src="http://users4.Jabry.com/pengju/src/Calendar.js"
-
简单JavaScript日历及详细说明
效果图:测试代码: calendar2 #calendar{ background:#000; color:#FFF; font-size:0.8em; } #tittle{ font-size:1.4em; padding:4px 0.55em; } #days th { font-weight:bold; text-align:center; padding:4px 0.55em; } #calendar td{ text-align:center; padding:4px 0.55em;
-
javascript实现带节日和农历的日历特效
带节日和农历的脚本: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>带农历的日历</TITLE> <SCRIPT language="JavaScript"> <!-- var lunarInfo
-
js Canvas实现的日历时钟案例分享
Html: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="requestNextAnimationFrame.js"></script> <script src="calendarWithTime.js">&
-
JS学习之一个简易的日历控件
这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo
-
javascript实现日历控件(年月日关闭按钮)
经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo
-
JavaScript制作简单的日历效果
本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>
-
javascript实现的淘宝旅行通用日历组件用法实例
本文实例讲述了javascript实现的淘宝旅行通用日历组件用法.分享给大家供大家参考. 在线演示:http://demo.jb51.net/js/2015/trip-calendar/demo.html PS:下面的演示代码,需要用到 trip-calendar.js与trip-calendar.css文件.打包下载地址 具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">