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 ...
随机推荐
- git 命令行(二)-创建合并分支
1. 创建和合并分支 1. 我们创建 xu 分支,然后切换到 xu 分支: 2. 用 git branch 命令查看当前分支: git branch命令会列出所有分支,当前分支前面会标一个*号. ...
- csdn vip文章:Unity游戏开发-小游戏-非常简单的游戏-unity-
原文https://blog.csdn.net/qq_20484877/article/details/81841190 1*创建物体 Create菜单下 3D Object菜单下Cube 1.1设置 ...
- Scrapy下载器中间件实现随机请求头和代理ip
一.设置随机请求头 class UAMiddleWare(object): UA_LIST = [ 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; ...
- day66test
作业 1. 先有一下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: ...
- lost connection to MySQL server at waiting for initial communication packet,system error:o
1 可以先测试mysql本地连接石否正常 2 正常的话查看远程连接的IP在mysql中是否有权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIF ...
- WebConfig配置文件
<?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual S ...
- placeholder IE兼容,显示password
从网上找了很多关于placeholder IE兼容性的问题,下边的这个js方法可以显示password. <!doctype html> <html lang="en&qu ...
- 使用Charles在iOS6上进行抓包
抓取Web页面的网络请求很容易,Chrome和Firefox都很容易做到.iOS APP如何抓包呢?其实也很容易,我比较喜欢使用 Charles. 我用的是Mac电脑,首先建立一个热点,然后让iOS设 ...
- [jnhs]教训之jsp页面无法用jstl取值的坑.真他妈的奇葩,实体类的属性名不能用大写
结果页面永远都是空 调试发现,数据正常的塞进去了 问题解决: https://zhidao.baidu.com/question/570584436.html 实体类的属性名,首字母不能大写,改成小写 ...
- 基于LSTM对西储大学轴承故障进行分析
这篇文章是小萌新对西储大学轴承故障进行分析,固定特征为故障直径为0.007,电机转速为1797,12k驱动端故障数据(Drive_End)即DE-time.故障类型y值:滚动体故障,内圈故障,3时,6 ...