首页
所有分类
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 相关文章推荐
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
JavaScript实现HSL拾色器
May 21 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
C#面试题(90) 网络工程师面试题(96) Android面试题(6) PHP面试题(54) 保加利亚购物网站(3) .NET面试题(131) DB面试题(126) 冰岛购物网站(1) JAVA面试题(401) C++面试题(199)
You might like
提取HTML标签
2006/10/09 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
NodeJS学习笔记之Connect中间件模块（二）
2015/01/27 NodeJs
ionic隐藏tabs的方法
2016/08/29 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python unittest实现api自动化测试
2018/04/04 Python
python计算两个数的百分比方法
2018/06/29 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python中的itertools的使用详解
2020/01/13 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
python实现扫雷游戏的示例
2020/10/20 Python
python爬虫请求头的使用
2020/12/01 Python
德国运动鞋网上商店：Afew Store
2018/01/05 全球购物
美国最好的钓鱼、狩猎和划船装备商店：Bass Pro Shops
2018/12/02 全球购物
Bandier官网：奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
应届生如何写自荐信
2014/01/05 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
读后感作文评语
2014/12/25 职场文书
英文辞职信范文
2015/05/13 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
学习心理学心得体会
2016/01/22 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript