使用JavaScript怎么实现一个日历显示效果函数？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
效果如下：
这个日历效果有高亮显示，我实现的思维比较简单。
我把上面的日历效果用表格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 ><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 >'+ t++ +'</td>';
//假如不是当前月份则默认1为高亮日期
}else if((thisyear != year && t == 1) || (thismonth != month && t == 1)){
str +='<td >'+ t++ +'</td>';
}else{
//该月份的普通日期
str +='<td >'+ 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 >'+ remainlastday++ +'</td>';
}else{
if((thisyear != year && remainlastday == 1) || (thismonth != month && remainlastday == 1)){
//剩下的天数从这里开始的话，默认的第一天还是为红色
str +='<td >'+ remainlastday++ +'</td>';
}else{
str +='<td >'+ 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>关于使用JavaScript怎么实现一个日历显示效果函数问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
