一个js简单的日历显示效果的函数
用一个函数简单的实现一个月份的日历，效果如下：
这个日历效果有高亮显示，我实现的思维比较简单。
我把上面的日历效果用表格table生成，分成两个部分。
第一个部分：就是前面的第一排，我用一行<tr></tr>显示，这一部分表示的上个月份留下来的日期和这个月份的日期的混合日期；
第二部分：就是剩下的所有排，这里我用五行<tr></tr>显示，这一部分表示的是这个月份和下个月份的日期的混合日期。
这里为什么要用6行<tr></tr>来显示日历的效果呢？原因是有的月份跨越了6行，所以为了兼容所有的月份，只好用6行了。
下面是代码：
<!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" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>js的日历</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
table tr td {
width:27px;
text-align:center;
}
</style>
<script type="text/javascript">
(function(){
//获取日历的函数，参数是年份year和月份Month，默认是今年当月的日历
function getcalendar(year,month){
year = year ? year : new Date().getFullYear();
//month是0开始到11结束的，获取当前月份必须加1
month = month ? month : new Date().getMonth()+1;
var last = new Date(year,month-1,0);
var lastdate = last.getDate();//获取上个月的最大日期
var lastday = last.getDay();//获取上个月最大日期的星期几
var months = new Date(year,month,0);
var Maxdate = months.getDate();//获取这个月最大的日期
//获取当前的日期，为的是高亮显示当前的日期
var today = new Date().getDate();
var thisyear = new Date().getFullYear();
var thismonth = new Date().getMonth()+1;
var str = '<table><tr style="font-size:21px;font-weight:bold;"><td id="dec">\<</td> <td colspan="5">'+year+'年'+month+'月</td><td id="add">\></td></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
//获取上个月在这个月份中存在的最后日期
var remainlastdate = lastdate - lastday;
var t = 1;
str += '<tr>';
for(var g=0;g<=6;g++){
//星期是从0开始到6结束的，小于等于上个月最大星期的日期则是上个月的日期
if(g <= lastday){
str +='<td>'+ remainlastdate++ +'</td>';
}else{
//高亮显示当前日期
if(thisyear == year && thismonth == month && today == t){
str +='<td style="color:red;">'+ t++ +'</td>';
//假如不是当前月份则默认1为高亮日期
}else if((thisyear != year && t == 1) || (thismonth != month && t == 1)){
str +='<td style="color:red;">'+ t++ +'</td>';
}else{
//该月份的普通日期
str +='<td style="color:blue;">'+ t++ +'</td>';
}
}
}
str += '</tr>';
//除去上面的部分，这个月从哪里开始
var remainlastday = 6 - lastday + 1;
var nextMonthday = 1;//下一个月份的开始日期
//这里i最大值为5是为了兼容所有的月份，有的月份可能跨越6个tr
for(var i=1;i<=5;i++){
str += '<tr>';
for(var j=0;j<7;j++){
if(remainlastday <= Maxdate){
if(thisyear == year && thismonth == month && today == remainlastday){
str +='<td style="color:red;">'+ remainlastday++ +'</td>';
}else{
if((thisyear != year && remainlastday == 1) || (thismonth != month && remainlastday == 1)){
//剩下的天数从这里开始的话，默认的第一天还是为红色
str +='<td style="color:red;">'+ remainlastday++ +'</td>';
}else{
str +='<td style="color:blue;">'+ remainlastday++ +'</td>';
}
}
}else{
str +='<td>'+ nextMonthday++ +'</td>';
}
}
str += '</tr>';
}
str +='</table>';
return str;
}
return window.calendar=getcalendar;
})();
document.write(calendar(2018,1));
</script>
</head>
<body>
<div id='di'></div>
</body>
</html>
上面的函数简单的实现了日历，当然，要想让这个日历变得更强大，更有意思，你还得自己动手修改一下上面的函数。
有什么bug还望读者指出。
一个js简单的日历显示效果的函数的更多相关文章
- Epii.js 一个极其简单的Js模板引擎
Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...
- python爬虫的一个常见简单js反爬
python爬虫的一个常见简单js反爬 我们在写爬虫是遇到最多的应该就是js反爬了,今天分享一个比较常见的js反爬,这个我已经在多个网站上见到过了. 我把js反爬分为参数由js加密生成和js生成coo ...
- Node.js简单介绍并实现一个简单的Web MVC框架
编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...
- sChart.js：一个小型简单的图表库
介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...
- 一个不错的PHP二维数组排序函数简单易用存用
一个不错的PHP二维数组排序函数简单易用存用 传入数组,传入排序的键,传入排序顺序 public function array_sort($arr,$keys,$type='asc') { $keys ...
- djb2：一个产生简单的随机分布的哈希函数
目录 LCG算法 示例代码 djb2 示例代码 为什么选择参数33和 33 was chosen because: 5381 was chosen because 哈希选择参考 LCG算法 djb2与 ...
- 使用JAVA写一个简单的日历
JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...
- js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...
- Js文件函数中调用另一个Js文件函数的方法
在项目中Js文件需要完成某一功能,但这一功能的大部分代码在另外一个Js文件已经完成,只需要调用这个文件实现功能.那么如何调用:一个Js文件函数中调用另一个Js文件函数的方法? (直接代码说明) 示例d ...
随机推荐
- MapReduce类型与格式(输入与输出)
一.输入格式 (1)输入分片记录 ①JobClient通过指定的输入文件的格式来生成数据分片InputSplit: ②一个分片不是数据本身,而是可分片数据的引用: ③InputFormat接口负责生成 ...
- 注解：Hibernate双向N->N关联（两端都控制关联关系）
Person与Address关联:双向N->N,[连接表必须有],两端都控制关联关系 #需要说明的是:如果程序希望某一端放弃控制关联关系,则可以在这一段的@ManyToMany注解中指定mapp ...
- GO语言中json与map的转换
直接上代码(需要引入encoding/json包) // 当前程序的包名 package main // 导入其它的包 import ( "encoding/json" " ...
- SOAPUI使用教程-创建MockResponse步骤
MockResponse测试步骤监听一个SOAP请求并返回一个预先配置的响应,然后再继续. 传入的请求的能被断言检查. 这种TestStep使用场景是例如: 客户端测试,验证传入的请求并返回假或不正确 ...
- 【TYVJ1864】[Poetize I]守卫者的挑战 概率与期望
[TYVJ1864][Poetize I]守卫者的挑战 描述 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过."我 ...
- BZOJ 1260&UVa 4394 区间DP
题意: 给一段字符串成段染色,问染成目标串最少次数. SOL: 区间DP... DP[i][j]表示从i染到j最小代价 转移:dp[i][j]=min(dp[i][j],dp[i+1][k]+dp[k ...
- css input[type=file] 样式美化，input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- zeromq中两个dealer 通过一个router进行通信
发现有童鞋不是很清楚ZMQ中的“请求-回复”模式中的ROUTER怎么用,所以简单介绍一下“请求-回复”模式的使用(最后付代码). 一.讲一讲 1.要使用zmq 通过一个router进行通信,你首先需要 ...
- 【MongoDB：第二天】基本操作
接上一篇博客: http://www.cnblogs.com/xiaoit/p/3867573.html 1:插入新的数据 db.person.insert({"uid" : 12 ...
- shared jedis 在spring中的配置
redis 属性文件配置: redis.host=xx.xx.xx.xx redis.port=6379 #redis.pass=xxxxx redis.maxIdle=10000 redis.max ...