首页
所有分类
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 相关文章推荐
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）
Mar 24 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
javaScript代码飘红报错看不懂？读完这篇文章再试试
Aug 19 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) NginxConfig(1) DeOldify(1) virtualenv(1) SVN(1) 共享文件夹(1) localStorage(1) 横向滚动(1) 加载异常(1) Postman(1)
You might like
第十四节--命名空间
2006/11/16 PHP
Smarty安装配置方法
2008/04/10 PHP
php 操作符与控制结构
2012/03/07 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python+django实现文件上传
2016/01/17 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
自学python的建议和周期预算
2019/01/30 Python
python-numpy-指数分布实例详解
2019/12/07 Python
size?德国官方网站：英国伦敦的球鞋精品店
2018/03/17 全球购物
彪马加拿大官网：PUMA加拿大
2018/10/04 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
小学生安全保证书
2014/02/01 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android