html部分

<div class="div">
<p><span onclick="syn()">上一年</span><span onclick="addn()">下一年</span></p>
<p><span onclick="syy()">上一月</span><span onclick="add()">下一月</span></p>
<p id="p"></p>
<div class="div">
<ul>
<Li>日</Li>
<Li>一</Li>
<Li>二</Li>
<Li>三</Li>
<Li>四</Li>
<Li>五</Li>
<Li>六</Li>
</ul>
</div>
<div id="div" class="div"> </div>
<div >
<span>选择的日期是:</span>
<span id="rq"></span>
</div>
</div>

css部分

*{
margin:;
padding:;
}
.div li{
float: left;
list-style: none;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.div{
width: 210px;
clear: both;
margin:0 auto;
margin-top: 30px;
}
.currentDate{
color: #eee;
}
.on{
background: blue;
color: #fff;
display: inline-block;
width: 100%;
height: 100%;
}

js部分

function daysInMonth(month, year) {//指定月份的天数
return new Date(year, month + 1, 0).getDate();
}
var div=document.getElementById('div');
var rq=document.getElementById('rq');
var today = new Date();//new日期
var dayStr = '';
var year = today.getFullYear(),//获取今天的年
month = today.getMonth(),//获取月
day = today.getDate();//获取日
var p=document.getElementById('p');
fn(year,month,day);
function fn(year,month,day){
dayStr = '';
div.innerHTML='';
p.innerHTML=year+'-'+(month+1)+'-'+day;
var firstDay =new Date(year,month,1).getDay();//这个月第一天星期几
var dayInMonth = daysInMonth(month,year);//这个月的天数
var sdayInMonth = daysInMonth(month-1,year);//上个月的天数
var lastDay =new Date(year,month,dayInMonth).getDay();//这个月最后一天星期几
var slastDay =new Date(year,month-1,sdayInMonth).getDay();//上个月最后一天 var date=1;
// 补齐前面的日期
for(var i=sdayInMonth-slastDay;i<=sdayInMonth;i++){
dayStr+='<li class="current-month" ><span class="currentDate">'+i+'</span></li>';
}
//循环出中间的日期
for(var date=1;date <= dayInMonth;date++){
if(date==day){//判断是否加背景
dayStr += '<li class="dayStyle" ><span class="on" onclick="djadd('+date+')">'+date+'</span></li>';
}else{
dayStr += '<li class="dayStyle" ><span onclick="djadd('+date+')">'+date+'</span></li>';
}
}
// 补齐后面的日期
for(var j = 1; j < (7 - lastDay); j++){
dayStr += '<li class="currentDate" ><span>'+j+'</span></li>';
} div.innerHTML=dayStr;
}
function syy(){//上一月
month=month-1;
if(month<0){
year=year-1;
month=11;
}
console.log(month,year);
fn(year,month,day)
}
function syn(){//下一年
year=year-1;
console.log(month,year);
fn(year,month,day)
}
function addn(){//上一年
year=year+1;
console.log(month,year);
fn(year,month,day)
}
function add(){//下一月
month=month+1;
if(month>11){
year=year+1;
month=0;
}
console.log(month,year);
fn(year,month,day)
}
function djadd(day){//显示选中的天数
day=day;
fn(year,month,day);
rq.innerHTML=year+'-'+(month+1)+'-'+day;
}

js日历的更多相关文章

  1. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  2. 百度的js日历

    <title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...

  3. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  4. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  5. JS日历控件集合----附效果图、源代码

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...

  6. js日历学习

    <!DOCTYPE html><html><head><title>自己写的JS日历,适合学习</title><script src= ...

  7. 简洁js日历控件的使用

    往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...

  8. JS日历控件 灵活设置: 精确的时分秒.

     在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月 ...

  9. My97DatePicker{js日历插件}

    VS自带了一个日历控件:Calendar,但是它有一个缺陷:即在选择,隐藏,显示的时候都会引起回传 Calendar控件的一些用法:    取值:Calendar1.SelectedDate.ToSh ...

  10. 创建一个js日历(原生JS实现日历)

    前言 方法是有参考网上一些资料的,比如闰年的判断,比如每个月第一天是星期几的判断.不说太多,拆分出一个个函数,希望能描述尽可能的清晰明了. 一,判断闰年 //判断闰年 function runNian ...

随机推荐

  1. [LOJ#162]模板题-快速幂2

    <题目链接> 注意:这可能也是一道模板题. 注意2:$p=998224352$ 注意3:对于$100\%$的数据,$n\leq 5 \times 10^6$ 这个题很启发思路,如果直接快速 ...

  2. SQL server插入数据后,获取自增长字段的值

      ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 insert into Tb_People(uname,er ...

  3. [code]自动白平衡white blance

    //2013.10.24 //eageldiao //自动白平衡 CvScalar rgb; rgb=cvAvg(src); #ifdef COLOR_GW //灰度世界假设(R,= R*K/Ravg ...

  4. ubuntu下编译安装poco

    系统环境: ubuntu版本:Linux jfcai-VirtualBox 4.15.0-29-generic #31-Ubuntu SMP Tue Jul 17 15:39:52 UTC 2018 ...

  5. Neo4j Desktop 管理工具的安装和应用

    安装和启动Neo4j桌面 如果您还没有,请下载 Neo4j.使用提供的说明(下载时显示),按照步骤1安装并启动Neo4j Desktop应用程序.下载页面上的步骤2说明向您展示了如何设置您的第一个项目 ...

  6. windows 2008 安装 apache + mysql + php

    下载准备 php : http://windows.php.net/downloads/releases/archives/ apache : https://www.apachehaus.com/c ...

  7. 使用线程 Monitor.Wait() 和 Monitor.Pulse()

      Wait() 和 Pulse() 机制用于线程间交互.当在一个对象上使用Wait() 方法时,访问这个对象的线程就会一直等待直到被唤醒.Pulse() 和 PulseAll() 方法用来通知等待的 ...

  8. 使用Jedis操作Redis-使用Java语言在客户端操作---对key的操作

    //添加String类型的模拟数据. jedis.set("mykey", "2"); jedis.set("mykey2", " ...

  9. Linux下安装jboss并设置自启动服务

    一.JDK和JBOSS下载jdk:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  10. git中的错误

    ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'git@gitee.co ...