首页
所有分类
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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
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
DNS服务器(2) 事务并发(1) GZIP(2) DBLink(1) 复读(1) IIS7(1) .NET Framework(2) FTP服务器(1) 磁盘分区(1) 幻读(5)
You might like
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
在Z-Blog中运行代码[html][/html]（纯JS版）
2007/03/25 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
小程序自动化测试的示例代码
2020/08/11 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python itertools模块详解
2015/05/09 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python tkinter canvas使用实例
2019/11/04 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
Lenox官网：精美的瓷器＆独特的礼品
2017/02/12 全球购物
致接力运动员广播稿
2014/02/17 职场文书
就业协议书怎么填
2014/04/11 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
安全承诺书
2015/01/19 职场文书
北京天坛导游词
2015/02/12 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js