<!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. Eclipse下Android开发错误之Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace

    升级了Android版本后,在运行应用时提示: [2013-11-27 10:37:35 - Dex Loader] Unable to execute dex: java.nio.BufferOve ...

  2. Java 程序性能优化

    1. singleton延时初始化 class Singleton { private static Singleton _instance = null; public synchronized S ...

  3. GnuPG 1.4.15 发布，邮件加密工具

    GnuPG 1.4.15 改进包括: * Fixed possible infinite recursion in the compressed packet parser. [CVE-2013-44 ...

  4. 不用asp.net MVC，用WebForm照样可以实现MVC（请看最后一句话）

    在<避开WebForm天坑,拥抱ASP.Net MVC吧>这篇博客中我讲到了ASP.net WebForm由于一些先天的“诱导犯罪”的缺陷,现在用ASP.net MVC的公司越来越多.但是 ...

  5. [C#进阶系列]专题一：深入解析深拷贝和浅拷贝

    一.前言 这个星期参加了一个面试,面试中问到深浅拷贝的区别,然后我就简单了讲述了它们的之间的区别,然后面试官又继续问,如何实现一个深拷贝呢?当时只回答回答了一种方式,就是使用反射,然后面试官提示还可以 ...

  6. 图解集合4：HashMap

    初识HashMap 之前的List,讲了ArrayList.LinkedList,最后讲到了CopyOnWriteArrayList,就前两者而言,反映的是两种思想: (1)ArrayList以数组形 ...

  7. Powershell--批量拆分SQL语句为事务并批处理

    作为DBA,时不时会遇到将数据导入到数据库的情况,假设业务或研发提供一个包含上百万行INSERT语句的脚本文件,而且这些INSERT 语句没有使用GO来进行批处理拆分,那么直接使用SQLCMD来执行会 ...

  8. C#Light 小幅升级，支持快速绑定匿名函数、Lambda表达式

    二话不说直接上图 new RegHelper_Function(delegate,funcname);即可 因为匿名函数没有名字,制定一个函数名就可以从脚本调用了. 原来的绑定实名函数方法也小幅调整为 ...

  9. Asp.net MVC 中Ajax的使用 [分享]

    文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra= Asp.net MVC 抛弃了A ...

  10. 使用OData技术遇到的问题及解决办法

    “System.NotSupportedException”类型的未经处理的异常在 Microsoft.Data.Services.Client.dll 中发生 其他信息: 对此 POST 请求的响应 ...