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 ...
随机推荐
- php filemtime filectime fileatime的区别
1.fileatime()int fileatime(string filename):fileatime()函数返回filename最后访问的时间,这里的最后访问是指每当一个文件的数据块被读取,采用 ...
- docker 整理
管理 docker批量删除容器.镜像 1.删除所有容器 docker rm `docker ps -a -q` 1.1 按条件删除容器 删除包含某个字段 ,镜像名或容器名均可, 例如删除 zhy* ...
- shell中各种括号的作用详解()、(())、[]、[[]]、{}
一.小括号,圆括号() 1.单小括号 () ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号, ...
- js中的观察者模式与发布者/订阅者模式的区别?
- odoo web controller
Routing openerp.http.route(route=None, **kw) Decorator marking the decorated method as being a handl ...
- windows远程连接linux-安装xfce界面,ubuntn添加新用户
参考:“ 使用xrdp实现windows 远程桌面连接linux” http://blog.csdn.net/qq_33530388/article/details/64502902; http: ...
- SmartSQL
- Firefox Developer Edition - Mozilla
冰狐浏览器开发者工具:https://www.mozilla.org/en-US/firefox/developer/ 冰狐浏览器开发者工具:https://www.mozilla.org/en-US ...
- _mysql_exceptions.IntegrityError: (1062, "Duplicate entry, Python操作MySQL数据库,插入重复数据
[python] view plain copy sql = "INSERT INTO test_c(id,name,sex)values(%s,%s,%s)" param = ...
- [jnhs]id字段修改错误导致hibernate hql查询整表只返回第一条数据
调试发现,查询到的就是一条数据 hql语句执行结果 Hibernate: select ballmodel0_.ball_id as ball_id1_1_, ballmodel0_.color as ...