js日历
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日历的更多相关文章
- 简洁JS 日历控件 支持日期和月份选择
原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...
- 百度的js日历
<title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...
- JS日历控件优化(增加时分秒)
JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy ...
- Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- JS日历控件集合----附效果图、源代码
http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...
- js日历学习
<!DOCTYPE html><html><head><title>自己写的JS日历,适合学习</title><script src= ...
- 简洁js日历控件的使用
往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...
- JS日历控件 灵活设置: 精确的时分秒.
在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下: 1. 在原基础上 支持 yyyy-mm-dd 的年月 ...
- My97DatePicker{js日历插件}
VS自带了一个日历控件:Calendar,但是它有一个缺陷:即在选择,隐藏,显示的时候都会引起回传 Calendar控件的一些用法: 取值:Calendar1.SelectedDate.ToSh ...
- 创建一个js日历(原生JS实现日历)
前言 方法是有参考网上一些资料的,比如闰年的判断,比如每个月第一天是星期几的判断.不说太多,拆分出一个个函数,希望能描述尽可能的清晰明了. 一,判断闰年 //判断闰年 function runNian ...
随机推荐
- spring cloud深入学习(九)-----配置中心服务化和高可用
在前两篇的介绍中,客户端都是直接调用配置中心的server端来获取配置文件信息.这样就存在了一个问题,客户端和服务端的耦合性太高,如果server端要做集群,客户端只能通过原始的方式来路由,serve ...
- jeecms系统_自定义对象流程
库内新增对象Products 的流程说明: 第一步: com.jeecms.cms.entity.assist.base下建立模型基础类,BaseCmsProducts.java com.jeecms ...
- JDBC工具类-DButils(QueryRunner-ResultSetHandler)
简述: DBUtils是Java编程中的数据库操作实用工具,小巧简单实用. DBUtils封装了对JDBC的操作,简化了JDBC操作,可以少写代码. DBUtils三个核心功能: QUeryRunne ...
- 一、初识asyncio协程
初识asyncio协程 一.基本概念 要想了解学习协程相关知识要先对以下几个概念先行了解: 阻塞 阻塞状态是指程序未得到某所需计算资源时的挂起状态,简单说就是程序在等待某个操作未执行完前无法执 ...
- Django模型中的OneToOneField和ForeignKey有什么区别?
说是ForeignKey是one-to-many的,并举了一个车的例子: 有两个配件表,一个是车轮表,另一个是引擎表.两个表都有一个car字段,表示该配件对应的车. 对于车轮来说,多个对应一个car的 ...
- 常见Idea插件
一.Maven Helper Maven Helper用来查找和排除Jar包冲突的依赖关系. 安装: 打开Idea的Settings→Plugins→在输入框中输入“maven helper”→点击I ...
- qq邮箱问卷,测试不支持form表单
想做个类似苹果调查问卷的: 找到qq邮箱的代码编辑器: 写好我们的网页(h5) <!DOCTYPE html> <html lang="en"> <h ...
- php数据几行代码导出到excel(非插件)
<?php header("Content-type:application/vnd.ms-excel"); header("Content-Disposition ...
- Sql 竖表转横表
) set @sql='select t3.BID,t5.UnitName,Sort,UnitTypeSort' select @sql=@sql+' , max(case t4.id when '' ...
- USACO 2.1.4
/* ID: weitong4 LANG: C++ TASK: holstein */ #include<stdio.h> #include<string.h> #define ...