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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
js弹出对话框方式小结
Nov 17 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python函数式编程
2017/07/20 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
对Python实现累加函数的方法详解
2019/01/23 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
如何写一份好的英文求职信
2014/03/19 职场文书
售后服务承诺书范文
2014/03/26 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
廉政承诺书2015
2015/04/28 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS