8顶

原生JS代码制作带记事备忘功能的双月份显示效果的日历月历特效代码

稿源：互联网 2018-09-03 02:06:42 点击： 9756 撤稿纠错

界面简洁直观，双月份显示联动效果，点击日期浮出消息提示，可以升级做一些备忘之类的功能。

以下讨论的是和原生JS 日历月历相关的原生JS代码制作带记事备忘功能的双月份显示效果的日历月历特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">

</style>

<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代码制作带记事备忘功能的双月份显示效果的日历月历特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090391582.shtml方便下次再访问哦。

·上一篇： 原生js写的贪食蛇网页版小游戏特效代码，一共设计了10关
·下一篇： 兼容谷歌浏览器，IE浏览器和360极速浏览器等多浏览器的加入收藏特效代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

原生JS代码制作带记事备忘功能的双月份显示效果的日历月历特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻