首页
所有分类
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 相关文章推荐
Mootools 1.2教程 选项卡效果（Tabs）
Sep 15 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
Electron实现应用打包、自动升级过程解析
Jul 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
YB217(1) S2000(3) YB400(2) 1 Tube Radio(1) 东方红(1) 直流胆(1) 再生机(1) 森海(1) YB235(1) MX500(1)
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
Redis构建分布式锁
2017/03/28 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
javascript常用的设计模式
2017/02/09 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
微软英国官方网站：Microsoft英国
2016/10/15 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
运动会稿件100字
2014/09/24 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2014年会计工作总结
2014/11/27 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang