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. spring cloud深入学习(九)-----配置中心服务化和高可用

    在前两篇的介绍中,客户端都是直接调用配置中心的server端来获取配置文件信息.这样就存在了一个问题,客户端和服务端的耦合性太高,如果server端要做集群,客户端只能通过原始的方式来路由,serve ...

  2. jeecms系统_自定义对象流程

    库内新增对象Products 的流程说明: 第一步: com.jeecms.cms.entity.assist.base下建立模型基础类,BaseCmsProducts.java com.jeecms ...

  3. JDBC工具类-DButils(QueryRunner-ResultSetHandler)

    简述: DBUtils是Java编程中的数据库操作实用工具,小巧简单实用. DBUtils封装了对JDBC的操作,简化了JDBC操作,可以少写代码. DBUtils三个核心功能: QUeryRunne ...

  4. 一、初识asyncio协程

    初识asyncio协程 一.基本概念 ​ 要想了解学习协程相关知识要先对以下几个概念先行了解: 阻塞 ​ 阻塞状态是指程序未得到某所需计算资源时的挂起状态,简单说就是程序在等待某个操作未执行完前无法执 ...

  5. Django模型中的OneToOneField和ForeignKey有什么区别?

    说是ForeignKey是one-to-many的,并举了一个车的例子: 有两个配件表,一个是车轮表,另一个是引擎表.两个表都有一个car字段,表示该配件对应的车. 对于车轮来说,多个对应一个car的 ...

  6. 常见Idea插件

    一.Maven Helper Maven Helper用来查找和排除Jar包冲突的依赖关系. 安装: 打开Idea的Settings→Plugins→在输入框中输入“maven helper”→点击I ...

  7. qq邮箱问卷,测试不支持form表单

    想做个类似苹果调查问卷的: 找到qq邮箱的代码编辑器: 写好我们的网页(h5) <!DOCTYPE html> <html lang="en"> <h ...

  8. php数据几行代码导出到excel(非插件)

    <?php header("Content-type:application/vnd.ms-excel"); header("Content-Disposition ...

  9. Sql 竖表转横表

    ) set @sql='select t3.BID,t5.UnitName,Sort,UnitTypeSort' select @sql=@sql+' , max(case t4.id when '' ...

  10. USACO 2.1.4

    /* ID: weitong4 LANG: C++ TASK: holstein */ #include<stdio.h> #include<string.h> #define ...