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

原生JS实现相邻月份日历

Posted in Javascript onOctober 13, 2020 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS写的日历月历 - demo by js.alixixi.com</title>
<style type="text/css">
<!--
body {font-size: 14px;line-height: 20px;margin: 0px;padding: 0px;text-align:center;font-family: Arial;}
#overlay{position:absolute;z-index:999;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.3;filter:alpha(opacity=30);display:none;}
#win{position:absolute;z-index:999;top:50%;left:50%;width:400px;height:200px;background:rgba(00, 00, 00, 0.5);margin:-100px 0 0 -200px;display:none;}
#win #otitle{color:#fff;height:33px;padding-left:10px;text-align:left;background:rgba(00, 00, 00, 0.7);}
#win #otitle #otitlestr {float:left;width:200px;height:30px;line-height:30px;}
#win #otitle #close {font-size:24px;width:33px;height:33px;line-height:33px;text-align:center;font-weight:bold;float:right;cursor:pointer;}
#win #showstr {color:#fff;margin:10px;text-align:left;}
.clear{clear: both;}
em{font-style: normal;}
ul,li{list-style-type: none;margin:0px;padding:0px;}
#newDate{width:1230px;height:auto;margin:35px auto 0 auto;}
#newDate #nowDate{width:600px;height:600px;float:left;cursor:pointer;}
#newDate #nextDate{width:600px;height:600px;float:right;cursor:pointer;}
#newDate .Header{width:594px;height:50px;background:#e6dcda;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #FFF;position:relative;-moz-user-select:none;-webkit-user-select:none;user-select:none; }
#newDate .c{font-size:24px;font-weight:bold;height:50px;line-height:50px;text-align:center;}
#newDate .l{font-size:24px;font-weight:bold;height:50px;line-height:50px;position:absolute; top:0px; left:14px;}
#newDate .r{font-size:24px;font-weight:bold;height:50px;line-height:50px;position:absolute; top:0px; right:14px;}
#newDate .Weeks{width:595px;height:30px;}
#newDate span{font-weight:bold;width:84px;height:30px;line-height:30px;text-align:center;background:#e6dcda;margin-right:1px;float:left;}
#newDate ul li{color:#999;font-size:24px;width:84px;height:70px;line-height:70px;text-align:center;margin-top:1px;margin-right:1px;background:#f5f5f5;float:left;}
-->
</style>
<!--[IF lt IE 9]>
<style>
#win,#win #otitle{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);}
</style>
<![endif]-->
<script type="text/javascript">
window.onload = function(){
  function $(id){return typeof id === "string" ? document.getElementById(id) : id;}
 function lightBoxShow(title,str)
 {
 var oWin = $("win");
   var oLay = $("overlay");
 $("otitlestr").innerHTML = title;
 $("showstr").innerHTML = str;
 oLay.style.display = "block";
 oWin.style.display = "block";
 $("close").onclick = function ()
   {
   oLay.style.display = "none";
   oWin.style.display = "none" 
   }
 }
 
  var newDate = document.getElementById("newDate");
 var nowDate = document.getElementById("nowDate");
 var nextDate = document.getElementById("nextDate");
 var nDate = new Date();
 
 if(nDate.getMonth()+1==12){
   viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true);
 viewDate(nextDate,nDate.getFullYear()+1,1);
 }else{
   viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true);
 viewDate(nextDate,nDate.getFullYear(),nDate.getMonth()+2);
 }
 showBtn();
 
 function viewDate(obj,year,month,bBtn){
   var nDate = new Date();
 var dayNum = 0;
    
    if(!obj.bBtn){
      obj.Header = document.createElement("div");
      obj.Header.className = "Header";
      obj.appendChild(obj.Header);
      
      var Weeks = document.createElement("div");
      Weeks.className = "Weeks";
      obj.appendChild(Weeks);
      
      var weeksArr = ['SUN','MON','TUE','WEB','THU','FRI','SAT'];
      for(var i=0;i<7;i++){
        var nSpan = document.createElement("span");
        nSpan.innerHTML = weeksArr[i];
        if(i==0 || i==6){
          nSpan.style.color = "red";  
        }
        Weeks.appendChild(nSpan);
      }
      
      var nUl = document.createElement("ul");
      for(var i=0;i<42;i++){
        var nLi = document.createElement("li");
        nUl.appendChild(nLi);
      }
      obj.appendChild(nUl);
      
      obj.bBtn = true;
    }
    obj.Header.innerHTML = ( bBtn ? '<div class="l">＜ <em>'+(month-1)+'</em></div>' : '<div class="r"><em>'+(month+1)+'</em> ＞</div>')+'<div class="c"><em>'+year+'</em>-<em>'+month+'</em></div>'; 
    var aLi = obj.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
      aLi[i].innerHTML = "";
      aLi[i].style.background = "#f5f5f5";
      aLi[i].style.color = "#999";
    }
    
    if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
  dayNum = 31;
 }
 else if(month==4 || month==6 || month==9 || month==11){
  dayNum = 30;
 }
 else if(month==2 && isLeapYear(year)){
  dayNum = 29;
 }
 else{
  dayNum = 28;
 }
 
 nDate.setFullYear(year);
 nDate.setMonth(month-1);
 nDate.setDate(1);
 
 function Today(){
   var tDate = new Date();
  var tEm = aLi[i].parentNode.parentNode.getElementsByTagName("em");
   var tMonth = parseInt(tEm[2].innerHTML);
   var tYear = parseInt(tEm[1].innerHTML);
  if(aLi[i].innerHTML == tDate.getDate() && tYear == tDate.getFullYear() && tMonth == tDate.getMonth()+1){
     aLi[i].style.color = "#000";
     aLi[i].style.background = "#e6dcda";
   }  
 }
 
 switch(nDate.getDay()){
  case 0:
  for(var i=0;i<dayNum;i++){
   aLi[i].innerHTML = i+1;
   Today();
  }
  break;
  case 1:
  for(var i=0;i<dayNum;i++){
   aLi[i+1].innerHTML = i+1;
   Today(); 
  }
  break;
  case 2:
  for(var i=0;i<dayNum;i++){
   aLi[i+2].innerHTML = i+1;
   Today();
     } 
  break;
  case 3:
  for(var i=0;i<dayNum;i++){
   aLi[i+3].innerHTML = i+1;
   Today();
  }
  break;
  case 4:
  for(var i=0;i<dayNum;i++){
   aLi[i+4].innerHTML = i+1;
   Today();
  }
  break;
  case 5:
  for(var i=0;i<dayNum;i++){
   aLi[i+5].innerHTML = i+1;
   Today(); 
  }
  break;
  case 6:
  for(var i=0;i<dayNum;i++){
   aLi[i+6].innerHTML = i+1;
   Today(); 
  }
  break;
  
 }
 
 if(month==1 && bBtn){
  obj.Header.getElementsByTagName('em')[0].innerHTML = 12;
 }
 else if(month==12 && !bBtn){
  obj.Header.getElementsByTagName('em')[0].innerHTML = 1;
 }
 
 }
 
 function isLeapYear(year){
 if(year%4==0 && year%100!=0){
  return true;
 }
 else{
  if(year%400==0){
  return true;
  }
  else{
  return false;
  }
 }
 }
 
 
 function showBtn(){
 var nowEm = nowDate.getElementsByTagName("em");
 var nextEm = nextDate.getElementsByTagName("em");
 var leftMonth = parseInt(nowEm[0].innerHTML);
 var leftYear = parseInt(nowEm[1].innerHTML);
 var rightMonth = parseInt(nextEm[0].innerHTML);
 var rightYear = parseInt(nextEm[1].innerHTML);
 
 
 nowEm[0].parentNode.onclick = function(){
 
  if(leftMonth == 12){
  viewDate(nowDate,leftYear-1,leftMonth,true);
  viewDate(nextDate,leftYear,1);
  }
  else{
  viewDate(nowDate,leftYear,leftMonth,true);
  viewDate(nextDate,leftYear,leftMonth+1);
  }
  
  showBtn();
   
 };
 
 nextEm[0].parentNode.onclick = function(){
  
  if(rightMonth == 1){
  viewDate(nowDate,rightYear,12,true);
  viewDate(nextDate,rightYear+1,rightMonth);
  }
  else{
  viewDate(nowDate,rightYear,rightMonth-1,true);
  viewDate(nextDate,rightYear,rightMonth);
  }
  
  showBtn();
   
 };
 
 }
 function nowDay(){
   var tLi = newDate.getElementsByTagName("li");
   var tDate = new Date();
   
   for(var i=0;i<tLi.length;i++){
     tLi[i].onmouseover = function(){
     if(this.innerHTML != ""){
       this.style.color = "#000";
       this.style.background = "#e6dcda";
    }
   }
   tLi[i].onmouseout = function(){
     if(this.innerHTML != ""){
       this.style.color = "#999";
       this.style.background = "#f5f5f5";
    }
   }
   tLi[i].onclick = function(){
     var tEm = this.parentNode.parentNode.getElementsByTagName("em");
     var tMonth = parseInt(tEm[2].innerHTML);
     var tYear = parseInt(tEm[1].innerHTML);
     if(this.innerHTML!=""){
       lightBoxShow(tYear+"-"+tMonth+"-"+this.innerHTML+" Message","None");
       //alert(tYear+"-"+tMonth+"-"+this.innerHTML);
     }
   }
   }
   
   for(var j=tLi.length/2;j<tLi.length;j++){
     if(tLi[j].innerHTML == tDate.getDate()){
     tLi[j].style.color = "#000";
     tLi[j].style.background = "#e6dcda";
   }  
   }
 }
 nowDay();
}
</script>
</head>
<body>
<div id="newDate">
  <div id="nextDate"></div>
  <div id="nowDate"></div>
</div>
<div id="overlay"></div>
<div id="win">
  <div id="otitle">
    <div id="close">×</div>
   <div id="otitlestr"></div>
  </div>
  <div id="showstr"></div>
</div>
</body>
</html>

效果：

原生JS实现相邻月份日历

以上就是原生JS实现双界面日历的详细内容，更多关于js 日历的资料请关注三水点靠木其它相关文章！

原生JS实现相邻月份日历

- Author -

欢醉

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

Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
Javascript 学习笔记之 对象篇（二） : 原型对象
Jun 24 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
原生js实现照片墙效果
Oct 13 #Javascript
js轮播图之旋转木马效果
Oct 13 #Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 #Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 #Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 #Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 #Javascript
五子棋(12) 对齐打印(1) 异步回调(1) format(1) 井字棋(1) 图像处理(1) CompletableFuture(1) Springboot-cli(1) 计算器(5) 底部导航(1)
You might like
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
html5 标签
2009/07/16 HTML / CSS
Supersmart英国：欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
小学模范班主任事迹材料
2014/05/13 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
六五普法心得体会2016
2016/01/21 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL