突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会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原生日历的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  4. 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  5. js简易日历

    js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+&qu ...

  6. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  7. js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  8. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  9. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

随机推荐

  1. Hadoop虚拟机的jdk版本和本地eclipse的版本不一致怎么办

    在本周学习Hadoop遇到了一个问题,困扰了半天,本人在安装Hadoop时是按照视频来的,结果发现Hadoop上的jdk版本和本地eclipse的版本不一致,导致本地的程序到处jar包传到虚拟机上运用 ...

  2. Linux Shell编程、变量、控制语句

    为什么要学习Shell编程 1)Linux运维工程师在进行服务器集群管理时,需要编写Shell程序来进行服务器管理. 2)对于JavaEE和Python程序员来说,工作的需要,你的老大会要求你编写一些 ...

  3. TX2 刷机时遇到Parsing board information failed

    因为之前调试I2C时,修改了EEPROM Layout,所以,在刷机时遇到此问题. 解决办法是按照此文档中的介绍来修改布局. 实际操作时,我拿了一块正常的TX2,按照指令: sudo i2cdump ...

  4. 【EF数据库链接报错】“The underlying provider failed on open”

    EF在操作数据库时要反复链接.断开数据库,如果连接字符串是windows 服务验证,而不是用的用户名和密码,那么尝试访问数据库的用户是NT AUTHORITY\NETWORK SERVICE.权限不够 ...

  5. 在Azuer创建自己的Linux_VM

    ---恢复内容开始--- emm..就是想搭个自己的VPN去YouTube看看视屏找找资源什么的... (滑稽.jpg)然后发现似乎需要这个玩意儿 先去申请一个Azuer账户 然后根据要求一步步来就好 ...

  6. [转] 使用HTTPS在Nexus Repository Manager 3.0上搭建私有Docker仓库

    FROM: https://www.hifreud.com/2018/06/06/03-nexus-docker-repository-with-ssl/ 搭建方式 搭建SSL的Nexus官方提供两种 ...

  7. Mac下包管理平台homebrew的使用

    一.安装 参考:http://www.cnblogs.com/EasonJim/p/6287098.html 二.使用 假设我要安装node,命令如下: 安装软件 brew install node ...

  8. 阅读The Java® Language Specification需要知道的英文单词

      In any case/on any account  在任何情况下 “Varargs”是“variable number of arguments”的意思.有时候也被简单的称为“variable ...

  9. JavaScript设计模式-18.享元模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 【AppScan】入门工作原理详解

    AppScan,即 AppScan standard edition.其安装在 Windows 操作系统上,可以对网站等 Web 应用进行自动化的应用安全扫描和测试.Rational AppScan( ...