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


Posted in Javascript onOctober 31, 2017

突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会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原生日历的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
Javascript中Eval函数的使用说明
Oct 11 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 #Javascript
详解RequireJs官方使用教程
Oct 31 #Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 #Javascript
ES6解构赋值实例详解
Oct 31 #Javascript
js 获取json数组里面数组的长度实例
Oct 31 #Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
canvas绘制爱心的几种方法总结(推荐)
Oct 31 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP clearstatcache()函数详解
2010/03/02 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python判断输入日期为第几天的实例
2018/11/13 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
毕业生机械建模求职信
2013/10/14 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
承诺书怎么写
2014/03/26 职场文书
群众路线党课主持词
2014/04/01 职场文书
保研推荐信
2014/05/09 职场文书
中考标语大全
2014/06/05 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
pt-archiver 主键自增
2022/04/26 MySQL
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL