欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js原生日历的实例(推荐)

程序员文章站 2022-06-24 13:38:13
突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会javascript  的就可以写的日历;没有各种算法,只有一些逻辑相信只要懂javasc...

突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会javascript  的就可以写的日历;没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历。

js原生日历的实例(推荐)

<!doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
  <style type="text/css"> 
   *{ 
    margin: 0px; 
    padding: 0px; 
   } 
   #data{ 
    width: 280px; 
    border: 1px solid #000000; 
    margin: 20px auto; 
   } 
   #data > p{ 
    display: flex; 
   } 
   #data > h5{ 
    text-align: center; 
   } 
   #data > p > span{ 
    padding: 0 10px; 
   } 
   #prev,#next{ 
    cursor: pointer; 
   } 
   #nian{ 
    flex: 1; 
    text-align: center; 
   } 
   #title{ 
    overflow: hidden; 
    list-style: none; 
    background: #ccc; 
   } 
   #title > li{ 
    float: left; 
    width: 40px; 
    height: 26px; 
    line-height: 26px; 
    text-align: center; 
   } 
   #date{ 
    overflow: hidden; 
    list-style: none; 
   } 
   #date > li{ 
    float: left; 
    width: 34px; 
    height: 34px; 
    margin: 1px 1px; 
    border: 2px solid rgba(0,0,0,0); 
    line-height: 34px; 
    text-align: center; 
    cursor: pointer; 
   } 
   #date > .hover:hover{ 
    border: 2px solid red; 
   } 
    
   .active{ 
    color: red; 
   } 
  </style> 
 </head> 
 <body> 
   
  <div id="data"> 
   <p> 
    <span id="prev">上一月</span> 
    <span id="nian">2017</span> 
    <span id="next">下一月</span> 
   </p> 
   <h5 id="yue">一月</h5> 
   <ul id="title"> 
    <li>日</li> 
    <li>一</li> 
    <li>二</li> 
    <li>三</li> 
    <li>四</li> 
    <li>五</li> 
    <li>六</li> 
   </ul> 
   <ul id="date"> 
   </ul> 
  </div> 
   
  <script type="text/javascript"> 
   var dat = new date(); //当前时间 
   var niand = dat.getfullyear();//当前年份 
   var yued = dat.getmonth(); //当前月 
   var tiand = dat.getdate(); //当前天 这保存的年月日 是为了 当到达当前日期 有对比 
    
   add(); //进入页面第一次渲染 
    
   function add(){ 
    document.getelementbyid('date').innerhtml = ""; 
     
    var nian = dat.getfullyear();//当前年份 
    var yue = dat.getmonth(); //当前月 
    var tian = dat.getdate(); //当前天 
    var arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; 
    document.getelementbyid('nian').innertext = nian; 
    document.getelementbyid('yue').innertext = arr[yue]; 
     
    var setdat = new date(nian,yue + 1,1 - 1); //把时间设为下个月的1号 然后天数减去1 就可以得到 当前月的最后一天; 
    var settian = setdat.getdate(); //获取 当前月最后一天 
    var setzhou = new date(nian,yue,1).getday(); //获取当前月第一天 是 周几 
     
    for(var i=0;i<setzhou ;i++){//渲染空白 与 星期 对应上 
     var li=document.createelement('li'); 
     document.getelementbyid('date').appendchild(li); 
    } 
     
    for(var i=1;i<=settian;i++){//利用获取到的当月最后一天 把 前边的 天数 都循环 出来 
     var li=document.createelement('li'); 
     li.innertext = i; 
     if(nian == niand && yue == yued && i == tiand){ 
      li.classname = "active"; 
     }else{ 
      li.classname = "hover"; 
     } 
      
     document.getelementbyid('date').appendchild(li); 
    } 
     
   } 
    
   document.getelementbyid("next").onclick = function(){ 
    dat.setmonth(dat.getmonth() + 1); //当点击下一个月时 对当前月进行加1; 
    add(); //重新执行渲染 获取去 改变后的 年月日 进行渲染; 
   }; 
   document.getelementbyid("prev").onclick = function(){ 
    dat.setmonth(dat.getmonth() - 1); //与下一月 同理 
    add(); 
   }; 
  </script> 
 </body> 
</html>

以上这篇js原生日历的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。