首页
所有分类
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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
详解Jquery EasyUI tree 的异步加载（遍历指定文件夹，根据文件夹内的文件生成tree）
Feb 11 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
vue调用微信JSDK 扫一扫，相册等需要注意的事项
Jan 03 Vue.js
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
波兰购物网站(52) 欧洲购物网站(15) 阿联酋购物网站(26) 荷兰购物网站(99) 奥地利购物网站(28) 斯洛伐克购物网站(7) 葡萄牙购物网站(13) 哥伦比亚购物网站(5) 土耳其购物网站(10) 泰国购物网站(30)
You might like
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
javascript制作坦克大战全纪录（2）
2014/11/27 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现新浪博客备份的方法
2016/04/27 Python
python验证码识别实例代码
2018/02/03 Python
Python遍历pandas数据方法总结
2018/02/09 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python文件操作基础流程解析
2020/03/19 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
ALEX AND ANI：手镯，项链，耳环和更多
2017/04/20 全球购物
Agoda中文官网：安可达（低价预订全球酒店）
2021/01/18 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
应届生新闻编辑求职信
2013/11/19 职场文书
家长建议怎么写
2014/05/15 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
费用申请报告范文
2015/05/15 职场文书
让世界充满爱观后感
2015/06/10 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android