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原生日历的实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
纯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号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路 为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏
-
原生js实现仿window10系统日历效果的实例
舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>
-
js原生日历的实例(推荐)
突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历:没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *
-
使用原生js写ajax实例(推荐)
实例如下: // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器 return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ // IE6浏览器 var version = [ "MSXML2.XMLHttp.6.0
-
原生js实现each方法实例代码详解
jquery里面有个each方法,将循环操作简化.便捷. 随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型.且无法通过return true达到continue效果. 此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用. 在不使用 jquery 的 each 方法时,该如何处理:或者说用原生如何来实现? 前些前写了个类库: jTool , 其中就实现了该方法. 简单实现: // 通过字面量方式实现的函数each var
-
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
login.onclick = function(){ var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.rea
-
纯js实现html转pdf的简单实例(推荐)
项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试
-
JS判断是否在微信浏览器打开的简单实例(推荐)
最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以做得更完善一点,再加上判断是在移动设备打开还是在PC端浏览器打开的,更加细分一点,可以判断是
-
JS原生轮播图的简单实现(推荐)
哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: *{ padding: 0px; margin: 0px; } img{ width: 500px; height: 300px; } li{ float: left; } ul{ width: 2000px; list-style: none; position: absolute; } div{ width: 500px; height: 30
-
原生JS查找元素的方法(推荐)
今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定ID 最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: func
-
js禁止浏览器页面后退功能的实例(推荐)
实例如下所示: <script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); }
-
使用原生js封装的ajax实例(兼容jsonp)
实例如下: /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @param {object}opt.data 发送的参数,格式为对象类型 * @param {function}opt.success ajax发送并接收成功调用的回调函数 */