首页
所有分类
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 相关文章推荐
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 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
Keras(3) 计时器(1) name_scope (1) 三子棋(2) turtle(1) 神经网络(7) 绘图(1) variable_scope(1) 信号库(1) blinker(1)
You might like
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python opencv实现简易画图板
2020/08/27 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
管理心得体会
2013/12/28 职场文书
企业员工培训感言
2014/02/26 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA