<!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. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  2. Java jstatd详解

    jstatd 命令全称: Virtual Machine jstat Daemon DESCRIPTION The  jstatd tool is an RMI server application ...

  3. ZABBIX冗余架构构筑（Centos6.4+pacemaker+corosync+drbd）

    基本构成: 用pacemaker+corosync控制心跳和资源迁移 用drbd同步zabbix配置文件和mysql数据库 所有软件都用yum安装至默认路径 主机的drbd领域挂载至/drbd,备机不 ...

  4. 解压缩c#

    protected void btn_ServerClick(object sender, EventArgs e)    {        string strtxtPath = "E:/ ...

  5. smartroute简单集成集群聊天通讯

    在制定一个规模比较多大的聊天应用时,往往需要制定部署多个应用服务,其一可以保障服务的可靠性,其二可以增加用户负载量.但制定这样一种应用体系是一件复杂的事情,毕竟同一群体的用户实际上会在不同的服务器接入 ...

  6. file /usr/share/mysql/... conflicts with file from package mysql-libs-5.1.73-3.el6_5.x86_ 64 MySQL安装

    在CentOS 6.5安装MySQL 5.6.17,安装到最后一个rpm文件MySQL-server时 安装命令是:rpm -ivh MySQL-server-5.6.17-1.el6.x86_64. ...

  7. 使用JS或jQuery模拟鼠标点击a标签事件

    <a id="alink" href="abc.aspx"  style="visibility: hidden;">下一步&l ...

  8. dex分包变形记

    腾讯Bugly特约作者:李金涛 一.背景 就在项目灰度测试前不久,爆出了在 Android 3.0以下手机上安装时出现 INSTALL _ FAILED_DEXOPT,导致安装失败.这一问题意味着项目 ...

  9. Hadoop日记Day12---MapReduce学习

    一.MapReduce简介 1.1MapReduce概述 MapReduce是一种分布式计算模型,由Google提出,主要用于搜索领域,解决海量数据的计算问题.MR由两个阶段组成:Map和Reduce ...

  10. Wix 安装部署教程(十一) ---QuickWix

    这次发布的是这两天做的一个WIX工具QuickWIX,主要解决两个问题点1.对大文件快速生成wix标签(files,Directories,ComponentRef):2.比较前后两次工程的差异.大的 ...