首页
所有分类
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中常用的SET和GET
Jan 13 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
VUE实现吸底按钮
Mar 04 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
广播(8) Harman Kardon(1) 收音机(62) 短波(8) 立体声(1) 电台频率(32) 保养(1) 长波(3) 无线电(12) KDKA(1)
You might like
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP数字和字符串ID互转函数（类似优酷ID）
2014/06/30 PHP
php实现删除空目录的方法
2015/03/16 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JavaScript indexOf方法入门实例（计算指定字符在字符串中首次出现的位置）
2014/10/17 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
js初始化验证实例详解
2016/11/26 Javascript
微信小程序技巧之show内容展示，上传文件编码问题
2017/01/23 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
[04:55]完美世界副总裁蔡玮：DOTA2的自由、公平与信任
2013/12/18 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
如何利用Python识别图片中的文字
2020/05/31 Python
浅谈Python3中print函数的换行
2020/08/05 Python
中学教师岗位职责
2013/11/26 职场文书
文艺晚会主持词
2014/03/24 职场文书
出生公证书样本
2014/04/04 职场文书
三年级评语大全
2014/04/23 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
行政申诉状范文
2015/05/20 职场文书
歌舞青春观后感
2015/06/10 职场文书
汉语拼音教学反思
2016/02/22 职场文书
调研报告的主要写法
2019/04/18 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers