<!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双月份显示联动效果，点击日期浮出消息提示的更多相关文章

  1. unity点击按钮弹出操作提示界面

    1.首先在相应的位置添加一个(UGUI控件)image,在image下添加文本框和按钮设计弹出框内容如图: 2.新建C#脚本UITips using System.Collections; using ...

  2. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  4. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  5. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  6. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

  7. jQuery点击图片放大显示原图效果

    HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  8. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  9. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

随机推荐

  1. DLL和LIB的一些知识点（网上搜集）

    关于lib和dll的区别如下:(1)lib是编译时用到的,dll是运行时用到的.如果要完成源代码的编译,只需要lib:如果要使动态链接的程序运行起来,只需要dll.(2)如果有dll文件,那么lib一 ...

  2. 《Python标准库》 目录

    目录 译者序序前言第1章 文本1.1 string—文本常量和模板1.1.1 函数1.1.2 模板1.1.3 高级模板1.2 textwrap—格式化文本段落1.2.1 示例数据1.2.2 填充段落1 ...

  3. RHEL5.8配置开机自动挂载磁盘

    Linux环境中可以通过fstab来设置自动挂载磁盘或者共享存储,操作如下: fstab配置文件路径:/etc/fstab 每行代表一个存储位置. [root@appsrv01 ~]# cat /et ...

  4. wordpress搬家换域名

    很多朋友开始接触wordpress都是在本地安装调试好了,再上传到服务器正常运营,我也是一样当我在本地测试好了准备将网站上线,在搬家到服务器的时候遇到过的一些问题,记录分享一下我是如何为wordpre ...

  5. Replication的犄角旮旯（六）-- 一个DDL引发的血案(上)（如何近似估算DDL操作进度）

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  6. 如何编写 Cloud9 JavaScript IDE 的功能扩展

    上周末我们在JSConf.eu发布了 Cloud9 IDE ,同时发布了对应的GitHub项目.在4天时间里该项目得到340个人的关注和将近50个fork.Cloud9的口号是由"由Java ...

  7. ABP框架Web API跨域问题的解决方案

    ​1.在Web Api 项目下安装 Microsoft.AspNet.WebApi.Cors 包 Install-Package Microsoft.AspNet.WebApi.Cors 2.在Web ...

  8. Nightmare基于phantomjs的自动化测试套件

    今天将介绍一款自动化测试套件名叫nightmare,他是一个基于phantomjs的测试框架,一个基于phantomjs之上为测试应用封装的一套high level API.其API以goto, re ...

  9. [ACM_动态规划] Alignment （将军排队)

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28415#problem/F 题目大意:有n个士兵排成一列,将军想从中抽出最少人数使队伍中 ...

  10. http学习笔记（一）

    写在前面: 第一次想写系列文章,学习了一些web知识后,发现自己还有很大的不足,但又不知道该学习些什么来完善自己的知识体系,偶然在网上看到了一篇介绍http的文章,觉得对自己有一些帮助,于是想要开始学 ...