首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现简单的日历效果

Posted in Javascript onSeptember 25, 2016

只是个简单的日历模板，各位可根据需要自行添加需要的功能。该模板更多的是提供了关于年、月、日、月初、月末、星期的获取函数。各位可根据需要自行获取。欢迎提供更简便的方式方法，互相学习提高！谢谢~~

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>日历</title>
 <style type="text/css">
 * {
  cursor: default;
 }
 div {
  overflow: hidden;
 }
 .mainArea {
  margin: 30px auto 0;
  border: 1px solid #666;
  height: 230px;
  width: 210px;
  background-color: #eee;
  font-family: 'microsoft yahei';
 }

 .top {
  height: 30px;
  background-color: #aaa;
 }

 .top span {
  cursor: default;
 }

 .top span:hover {
  background-color: red;
 }

 .top .selectFlagLeft span,
 .top .selectFlagRight span {
  display: block;
  float: left;
  line-height: 30px;
  text-align: center;
 }

 .top span.selectFlag {
  width: 50%;
 }

 .top span.selectYear {
  width: 60px;
  height: 30px;
  display: block;
  float: left;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
 }

 .top span.selectMonth {
  display: block;
  height: 30px;
  margin-left: 60px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
 }

 .top .selectFlagLeft {
  float: left;
  width: 60px;
  height: 30px;
 }

 .top .selectFlagRight {
  float: right;
  width: 60px;
  height: 30px;
  margin-top: -30px;
 }

 .top .selectMiddle {
  height: 30px;
  margin-left: 60px;
  margin-right: 60px;
 }

 .dayTb {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #fff;
  ~display: none;
 }

 .dayTb thead {
  background-color: #675;
  color: #eee;
 }

 .dayTb tr {
  height: 24px;
 }

 .dayTb td {
  border: 1px solid #ddd;
  cursor: default;
  background-color: #dadada;
  font-weight: 100;
  color: rgba(102, 102, 102, 0.6);
 }
 /* .dayTb td:hover, */
 .dayTb td.currentMonth:hover,
 .dayTb td.currentMonth.currentDay:hover,
 .dayTb td.currentMonth.week:hover {
  background-color: #0fa;
 }

 .dayTb td.currentMonth {
  background-color: #c0f0f0;
  color: #60f;
 }

 .dayTb td.currentMonth.currentDay {
  color: #f06;
 }

 .dayTb td.currentMonth.week {
  color: #00a080;
 }

 .footer {
  line-height: 27px;
  text-align: right;
  padding-right: 5px;
 }
 .footer span {
  border: 1px solid #bbb;
  padding: 2px 5px;
  font-size: 12px;
 }
 .selectYears {
  height: 168px;
  width: 100%;
  background-color: #333;
  text-align: center;
  display: none;
 }
 .selectYears {
  color: #fff;
  margin: 0;
  padding: 0;
 }
 .selectYears .contentYears span {
  font-size: 16px;
  padding: 7px 0;
  width: 25%;
  display: block;
  float: left;
 }
 .selectYears span:hover {
  background-color: red;
 }
 .selectFooter span{
  padding: 0 6px;
 }
 .selectYears .returnPage {
  font-size: 12px;
  display: block;
  float: right;
  margin-top: -22px;
  margin-right: 10px;
  padding: 2px 6px;
 }
 </style>
</head>
<body>
 <div class="mainArea">
 <div class="top">
  <div class="selectFlagLeft">
  <span class="selectFlag" id="prevYear">◄</span>
  <span class="selectFlag" id="prevMonth"><</span>
  </div>
  <div class="selectMiddle">
  <span class="selectYear" id="selectYear">
  </span>
  <span class="selectMonth" id="selectMonth">
  </span>
  </div>
  <div class="selectFlagRight">
  <span class="selectFlag" id="nextMonth">></span>
  <span class="selectFlag" id="nextYear">►</span>
  </div>
 </div>
 <table class="dayTb" id="dayTb" border=0 cellspacing=0 cellpadding=0>
  <thead>
  <tr>
   <th>日</th>
   <th>一</th>
   <th>二</th>
   <th>三</th>
   <th>四</th>
   <th>五</th>
   <th>六</th>
  </tr>
  </thead>
  <tbody>
  <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>
  </tbody>
 </table>
 <div class="selectYears">
  <div class="contentYears">
  <span>2015</span>
  <span>2014</span>
  <span>2013</span>
  <span>2012</span>
  <span>2011</span>
  <span>2010</span>
  <span>2009</span>
  <span>2008</span>
  <span>2007</span>
  <span>2006</span>
  <span>2005</span>
  <span>2004</span>
  <span>2003</span>
  <span>2002</span>
  <span>2001</span>
  <span>2000</span>
  </div>
  <div class="selectFooter">
  <span>←</span>
  <span>→</span>
  </div>
  <span class="returnPage">收起</span>
 </div>
 <div class="footer">
  <span>今日</span>
  <span>清除</span>
  <span>确定</span>
  <span>返回</span>
 </div>
 </div>


 <script type="text/javascript">
 window.onload = function() {

 /**
  * 时间数组
  */
 Date.prototype.toArray = function() 
 {  
   var now = this; 
   var dateAry = Array(); 
   dateAry[0] = now.getFullYear(); 
   dateAry[1] = (now.getMonth()+1<10?"0":"")+(now.getMonth()+1); 
   dateAry[2] = (now.getDate()<10?"0":"")+now.getDate(); 
   dateAry[3] = (now.getHours()<10?"0":"")+now.getHours(); 
   dateAry[4] = (now.getMinutes()<10?"0":"")+now.getMinutes(); 
   dateAry[5] = (now.getSeconds()<10?"0":"")+now.getSeconds(); 
   dateAry[6] = now.getDay(); 
   return dateAry; 
 };

 /**
  * 当月最大天数
  */
 function getMaxDayOfMonth(iYear, iMonth) {
  var newDate = new Date(iYear,iMonth,0);
  var dateAry = newDate.toArray();
  return parseInt(dateAry[2]);
 };

 /**
  * 当月第一天是周几
  */
 function getFirstDay(iYear, iMonth) {
  var newDate = new Date(iYear,iMonth,1);
  var dateAry = newDate.toArray();
  return parseInt(dateAry[6]);
 };

 var tdNodes = document.getElementsByTagName("td");
 var selectYearNode = document.getElementById("selectYear");
 var selectMonthNode = document.getElementById("selectMonth");
 var prevYearNode = document.getElementById("prevYear");
 var prevMonthNode = document.getElementById("prevMonth"); 
 var nextMonthNode = document.getElementById("nextMonth"); 
 var nextYearNode = document.getElementById("nextYear"); 

 var now = new Date();
 var ary = now.toArray();

 function changeYearOrMonth(iYearDiff, iMonthDiff) {
  var currentYear = parseInt(selectYearNode.innerHTML);
  var currentMonth = parseInt(selectMonthNode.innerHTML);
  var newDate = new Date(currentYear+iYearDiff,currentMonth+iMonthDiff-1,1);
  var dateAry = newDate.toArray();
  insertAllMonth(dateAry[0], dateAry[1]);
 };

 function insertAllMonth(iYear, iMonth) {
  selectYearNode.innerHTML = iYear;
  selectMonthNode.innerHTML = iMonth;

  var firstDay = getFirstDay(iYear, parseInt(iMonth)-1);
  var maxDay = getMaxDayOfMonth(iYear, iMonth);
  var prevMonthMaxDay = getMaxDayOfMonth(iYear, parseInt(iMonth)-1);

  var i = 0;
  for(i=firstDay;i>0;i--) {
  tdNodes[i-1].innerHTML = prevMonthMaxDay--;
  tdNodes[i-1].className = "";
  }
  for(i=1+firstDay;i<=maxDay+firstDay;i++) {
  tdNodes[i-1].innerHTML = i-firstDay;
  if(iYear == ary[0] && iMonth == ary[1] && i-firstDay == ary[2]) {
   tdNodes[i-1].className = "currentMonth currentDay";
  }else if(i%7 < 2){
   tdNodes[i-1].className = "currentMonth week";
  }else {
   tdNodes[i-1].className = "currentMonth";
  }
  }
  var one = 1;
  for(;i<=tdNodes.length;i++) {
  tdNodes[i-1].innerHTML = one++;
  tdNodes[i-1].className = "";
  }
 };

 insertAllMonth(ary[0], ary[1]);

 prevYearNode.onclick = function() {
  changeYearOrMonth(-1,0);
 };
 prevMonthNode.onclick = function() {
  changeYearOrMonth(0,-1);
 };
 nextMonthNode.onclick = function() {
  changeYearOrMonth(0,1);
 };
 nextYearNode.onclick = function() {
  changeYearOrMonth(1,0);
 };

 
 };
 </script>
</body>
</html>

JavaScript实现简单的日历效果

- Author -

tianzitianxie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
40款非常棒的jQuery 插件和制作教程（系列一）
Oct 26 Javascript
JS中表单的使用小结
Jan 11 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
js完美实现@提到好友特效（兼容各大浏览器）
Mar 16 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
javascript实现根据汉字获取简拼
Sep 25 #Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 #Javascript
微信小程序前端源码逻辑和工作流
Sep 25 #Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 #Javascript
原生JS实现网络彩票投注效果
Sep 25 #Javascript
JavaScript实现url参数转成json形式
Sep 25 #Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 #Javascript
阿根廷购物网站(9) 澳大利亚购物网站(309) 意大利购物网站(128) 芬兰购物网站(10) 丹麦购物网站(22) 肯尼亚购物网站(2) 瑞典购物网站(55) 挪威购物网站(7) 比利时购物网站(33) 南非购物网站(8)
You might like
php动态生成JavaScript代码
2009/03/09 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
Admin generator, filters and I18n
2011/10/06 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
JS 页面内容搜索，类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
Bootstrap标签页（Tab）插件使用方法
2017/03/21 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
python optparse模块使用实例
2015/04/09 Python
使用Python实现简单的服务器功能
2017/08/25 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
C语言编程题
2015/03/09 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
街道社区活动报告
2015/02/05 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
2015年中学团委工作总结
2015/07/22 职场文书