javascript实现2016新年版日历
先看看效果图，效果比较简单：
具体代码：
<html>
<head>
<title>javaScript日历</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
.calendar{
width:300px;
margin:100px auto;
text-align:center;
font-size:12px;
}
.calendar .wrap{
width:100%;
height:36px;
line-height:36px;
}
.calendar .wrap .theYear{
}
.calendar .wrap .theMonth{
color:#666;
}
.calendar .wrap span{
font-size:24px;
color: #DDD;
cursor:pointer;
font-family: Georgia, "Times New Roman", Times, serif;
}
.calendar .wrap span b:hover{
color: #777;
}
.calendar .wrap .span{
float:left;
}
.calendar .wrap .prev_year{
float:right;
margin-right:12px;
font-family:"sans-serif";
font-weight:bold;
font-size:14px;
}
.calendar .wrap .next_year{
float:right;
font-family:"sans-serif";
font-weight:bold;
font-size:14px;
}
.calendar .wrap .prev_month{
float:right;
margin-right:12px;
font-family:"sans-serif";
font-weight:bold;
margin-right:10px;
}
.calendar .wrap .next_month{
float:right;
font-family:"sans-serif";
font-weight:bold;
margin-right:10px;
}
.calendar .wrap .next_year:hover,.calendar .wrap .prev_year:hover,
.calendar .wrap .next_month:hover,.calendar .wrap .prev_month:hover{
color:#999;
}
.calendar table{
width:100%;
border-collapse:collapse;
}
.calendar .header{
background-color:#EEE;
font-family:"Microsoft YaHei";
}
.calendar .header td{
cursor:default;
}
.calendar td{
border:1px solid #CCC;
line-height:36px;
cursor:pointer;
}
.calendar td:hover{
background-color:#EEE;
}
.calendar .empty{
cursor:default;
}
.calendar .empty:hover{
background-color:#FFF;
}
.calendar .today{
background-color:#66BE8C;
color:#FFF;
}
.calendar .today:hover{
background-color:#66BE8C;
color:#FFF;
}
</style>
<script src="jquery-1.8.2.js"></script>
<script src="func.js"></script>
</head>
<body>
<div id="calendar" class="calendar">
<div class="wrap">
<span class="span"><b id="theYear" class="theYear">2016</b>/<b id="theMonth" class="theMonth">1</b></span>
<span class="next_year" id="next_year" title="下一年">>></span>
<span class="next_month" id="next_month" title="下一月">></span>
<span class="prev_month" id="prev_month" title="上一月"><</span>
<span class="prev_year" id="prev_year" title="上一年"><<</span>
</div>
<table cellpadding="0" cellspacing="0">
<tr class="header">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#prev_month").click(function(){
var theMonth=eval($("#theMonth").html());
var theYear=eval($("#theYear").html());
if(theMonth<=1){
$("#theMonth").html("12");
if(theYear<=1){
$("#theYear").html(1);
}else{
$("#theYear").html(theYear-1);
}
}else{
$("#theMonth").html(theMonth-1);
}
cur_year=eval($("#theYear").html());
cur_mon=eval($("#theMonth").html());
$("#calendar table tr").not(".header").remove();
$("#calendar table").append(createCalendar(cur_year,cur_mon));
$("#calendar table tr").not(".header").hide().fadeIn(500);
})
$("#next_month").click(function(){
var theMonth=eval($("#theMonth").html());
if(theMonth>=12){
var theYear=eval($("#theYear").html());
if(theYear>=2200){
$("#theYear").html(2200);
}else{
$("#theYear").html(eval(theYear+1));
}
$("#theMonth").html(1);
}else{
$("#theMonth").html(eval(theMonth+1));
}
cur_year=eval($("#theYear").html());
cur_mon=eval($("#theMonth").html());
$("#calendar table tr").not(".header").remove();
$("#calendar table").append(createCalendar(cur_year,cur_mon));
$("#calendar table tr").not(".header").hide().fadeIn(500);
})
$("#prev_year").click(function(){
var theYear=eval($("#theYear").html());
if(theYear<=1){
$("#theYear").html(1);
}else{
$("#theYear").html(eval(theYear-1));
}
cur_year=eval($("#theYear").html());
cur_mon=eval($("#theMonth").html());
$("#calendar table tr").not(".header").remove();
$("#calendar table").append(createCalendar(cur_year,cur_mon));
$("#calendar table tr").not(".header").hide().fadeIn(500);
})
$("#next_year").click(function(){
var theYear=eval($("#theYear").html());
if(theYear>=2200){
$("#theYear").html(2200);
}else{
$("#theYear").html(eval(theYear+1));
}
cur_year=eval($("#theYear").html());
cur_mon=eval($("#theMonth").html());
$("#calendar table tr").not(".header").remove();
$("#calendar table").append(createCalendar(cur_year,cur_mon));
$("#calendar table tr").not(".header").hide().fadeIn(500);
})
$("#calendar table").append(createCalendar());
</script>
</body>
</html>
JavaScript代码
// 判断是否为闰年
function IsLeapYear(year){
if((year%400==0)||(year%4==0 && year%100!=0)){
return true;
}
return false;
}
// 日历
function createCalendar(year,month,date){
var d=new Date();
if(!year || year<=0){
cur_year=d.getFullYear(); // 年份
}else{
cur_year=year;
}
if(!month || month<=0){
cur_mon=d.getMonth(); // 日期
}else{
cur_mon=month-1;
}
if(!date || date<=0){
cur_date=d.getDate(); // 日期
}else{
cur_date=date;
}
month_days=new Array(31,28+IsLeapYear(d.getFullYear()),31,30,31,30,31,31,30,31,30,31); // 月份天数数组
month_firstday_date=new Date(cur_year,cur_mon,1);
monthDays=month_days[cur_mon];
monthFirstday=month_firstday_date.getDay(); // 月份的第一天是星期几
lines=Math.ceil((monthDays+monthFirstday)/7); // 表格所需行数
var calendarBody="";
for(var i=0;i<lines;i++){
calendarBody+="<tr class='line'>";
for(var j=0;j<7;j++){
idx=i*7+j; // 单元格自然序列号
if(i==0 && idx<monthFirstday){
calendarBody+="<td class='empty'></td>";
}else if(idx<monthDays+monthFirstday){
var date=idx+1-monthFirstday;
if(date==cur_date && cur_mon==d.getMonth() && cur_year==d.getFullYear()){
calendarBody+="<td class='today'>"+date+"</td>";
}else{
calendarBody+="<td>"+date+"</td>";
}
}else{
calendarBody+="<td class='empty'></td>";
}
}
calendarBody+="</tr>";
}
return calendarBody;
}
相关推荐
-
纯js简单日历实现代码
复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa
-
JavaScript制作简单的日历效果
本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>
-
js编写当天简单日历效果【实现代码】
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解
-
js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe
-
javascript html实现网页版日历代码
本文实例为大家分享了网页版日历代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <link rel="stylesheet" type="text/css" href="Skin.css"> <style> <!-- table{ text-align: center } --> </style> </head> <body&
-
轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-
-
ASP.NET中日历控件和JS版日历控件的使用方法（第5节）
今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一 Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个
-
纯js模仿windows系统日历
在网上看了几篇关于生成日历的js 教程于是自己也整理了一个想法思路 大家有什么建议欢迎提出 首先这个项目里面本人认为的几个难点: 1.如何定义每一个月的第一天位置 每个月的第一天都不是固定的星期几,所以第一天的输出需要动动脑筋把它放到对应的星期里面 2.每个月的最后一天有时候因为行数不够输出不了怎么办? 下面会有答案 ^_^ 思路: 1.定义好每一个月份的日期天数 2.获取当前的系统日期初始化数据 3.输出日历 2.1.先获取当前月的第一天是星期几(这一点与日历的排版至关重要!)
-
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
应为要有交互,选择了Js来实现,也算是 结对编程 的初试吧. 我将显示部分用html 写好,点击的按钮触发事件函数是check(): 复制代码 代码如下: function onCheck(){ var Year = document.getElementById("year").value; //获取文本框的"年" var theYear =Year * 1; //转换为number类型 //alert(theYear); // 获取月值 var month =
-
原生js制作日历控件实例分享
本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none
-
JS显示日历和天气的方法
本文实例讲述了JS显示日历和天气的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu