首页
所有分类
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 相关文章推荐
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
忘记密码(1) instantclient(1) pt-archiver(1) TcpServer(1) B+树(2) 增删改查(2) 优化(1) muduo(1) 存储过程(3) ICF-5900W(2)
You might like
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
Python入门篇之条件、循环
2014/10/17 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
python字符串，数值计算
2016/10/05 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地：Nestz
2019/02/23 全球购物
Nike俄罗斯官方网站：Nike RU
2021/03/05 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
电钳专业个人求职信
2014/01/04 职场文书
商超业务员岗位职责
2014/03/12 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书