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

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

<!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原生日历的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2017-10-29

原生js实现仿window10系统日历效果的实例

舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>

纯js模仿windows系统日历

在网上看了几篇关于生成日历的js 教程于是自己也整理了一个想法思路 大家有什么建议欢迎提出 首先这个项目里面本人认为的几个难点: 1.如何定义每一个月的第一天位置 每个月的第一天都不是固定的星期几,所以第一天的输出需要动动脑筋把它放到对应的星期里面 2.每个月的最后一天有时候因为行数不够输出不了怎么办? 下面会有答案 ^_^ 思路: 1.定义好每一个月份的日期天数 2.获取当前的系统日期初始化数据 3.输出日历     2.1.先获取当前月的第一天是星期几(这一点与日历的排版至关重要!)    

js实现会跳动的日历效果(完整实例)

一.简介 编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

原生JS实现日历组件的示例代码

想要实现的效果 点击日期选择框出现日历 有个日期控制栏帮助选择日期, 包括年.月.日的选择和今天 日历格子,初次点击日期选择框时显示此刻的日期,日历格子的日期应该包括这个月的所有天数,同时如果当月的1号不是周日,还应补全从周日到1号的天数.还要在这个月最后1号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路 为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏

原生JavaScript实现弹幕组件的示例代码

前言 如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类.这个类希望有如下属性和实例方法: 属性 el容器节点的选择器,容器节点应为绝对定位,设置好宽高 height 每条弹幕的高度 mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满 speed弹幕划过屏幕的时间 gapWidth后一条弹幕与前一条弹幕的距离 方法 pushData 添加弹幕元数据 addData持续加入弹幕 start开始调度弹幕 stop停止弹幕 r

原生js封装运动框架的示例讲解

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子 如下代码: #div{ width: 100px; height: 100px; background

原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

JS实现按钮添加背景音乐示例代码

1-代码 <html> <head> <meta charset="utf-8"> <title>js实现按键声</title> </head> <body> <ul> <li> <a href="menu-list" rel="external nofollow" rel="external nofollow"

原生js三级联动的简单实现代码

实例如下: <!DOCTYPE html> <head> <title> 三级联动 </title> <meta charset="utf-8"> </head> <body> <script> window.onload = function() { console.log(city) var oDiv = document.getElementById("div");

原生JS实现N级菜单的代码

需求分析 简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单 1.没有下一级菜单,直接排列 2.有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 '>' 的符号,效果如图: 图:1  初步实现 1.实现是否存在   > 注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路. HTML结构如下: 图:2 •要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移

开发Vue树形组件的示例代码

本文介绍了Vue树形组件的示例代码,分享给大家,具体如下: 使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的: <template> <div class="ui menu"> <template v-for="item in leftItems"> <a " v-if="!item.children" @click="item.click"&g

使用D3.js创建物流地图的示例代码

本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图 制作思路 需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板 加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意

原生js+ajax分页组件

本文实例为大家分享了js+ajax分页组件的具体代码,供大家参考,具体内容如下 1.定义分页组件DOM <div id="pagination" class="pagination"></div> 2.定义分页组件类及实例方法: // 分页组件类 function Pagination(_ref) { this.id = _ref.id; //分页组件挂载的DOM节点 this.curPage = _ref.curPage || 1; //初