前端入坑纪 25
上个礼拜天就想发的新文，一直到今天总算完成了。因为这回写的东西真的有点多啊！
要多多注解才行！
简洁月历
OK，first things first！项目链接
HTML 结构
<div id="cldrWrp" class="cldrWrp">
<div id="yearWrp">2017</div>
<div class="clear">
<a id="ltArr" class="arrs" href="javascript:;"></a>
<div class="lunaName" data-mouthNum="6">
<h2>六月</h2>
<h3>June</h3>
</div>
<a id="rtArr" class="arrs" href="javascript:;"></a>
</div>
<div class="cldrBody">
<div class="clear">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<ul id="datesWrp" class="clear">
</ul>
</div>
<div id="yearList">
</div>
</div>
html的布局上没啥特别难的，用到最多的就是浮动布局，比如每个日期的li标签都是左浮动的，然后算好宽度和对应的margin
CSS 结构
body {
background: #fff;
}
* {
margin: 0;
padding: 0
}
a {
color: #333;
text-decoration: none;
}
img {
border: none;
}
.clear::after {
content: "";
display: table;
clear: both
}
ul,
li {
list-style: none;
}
.cldrWrp {
line-height: 35px;
text-align: center;
width: 100%;
margin: 20px 0 0;
/*box-shadow: 0 0 8px #cfcfcf;*/
color: #666
}
#yearWrp {
height: 40px;
line-height: 40px;
font-size: 20px;
}
.cldrBody span,
.cldrBody ul li {
float: left;
display: block;
width: 13%;
margin-right: 1.5%;
}
#yearList a {
float: left;
display: block;
font-size: 17px;
width: 32%;
margin: 7px;
border-radius: 4px;
margin-left: 0;
margin-right: 2%;
line-height: 50px;
box-sizing: border-box;
color: #333;
background-color: #fafafa;
}
#yearList a:nth-child(3n) {
margin-right: 0
}
#yearList {
position: fixed;
border-radius: 8px;
box-shadow: 0 0 8px #ccc;
top: 1%;
left: 2%;
bottom: 1%;
right: 2%;
z-index: 9;
background-color: rgba(255, 255, 255, .95);
overflow: scroll;
display: none;
}
.cldrBody ul {
margin: 12px 0;
}
.cldrBody span:last-child,
.cldrBody ul li:nth-child(7n) {
margin-right: 0
}
.cldrBody ul li {
margin-bottom: 1.5%;
height: 45px;
line-height: 45px;
background-color: #fafafa;
color: #333;
border-radius: 3px
}
.cldrBody ul li.preMounth {
font-size: 12px;
color: #999;
}
.cldrBody ul li.passed {
color: #999;
}
.cldrBody ul li.innow {
color: #fff;
background-color: skyblue;
}
.arrs {
display: block;
position: relative;
float: left;
width: 30%;
height: 70px;
}
.arrs::before {
content: "";
display: block;
position: absolute;
height: 16px;
width: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateZ(45deg);
/*background-color: skyblue;*/
border: 1px solid slategray;
}
#ltArr.arrs::before {
border-top: 0;
border-right: 0
}
#rtArr.arrs::before {
border-bottom: 0;
border-left: 0
}
.lunaName {
float: left;
width: 40%;
}
类似如此的选择器 :nth-child(7n)代表 逢7的倍数时，附上对应的样式。
JS 结构
var odate = document.getElementById('datesWrp');
var nowDate = new Date(); //获取当前日期
var nowdate = nowDate.getDate(); //当前日期的几号
var nowmonth = nowDate.getMonth(); //当前日期的月份
var nowyear = nowDate.getFullYear(); //当前日期的年份
var yearMonthDayRun = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //闰年每个月的总天数
var yearMonthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //平年每个月的总天数
var englishNameOfMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var chineseNameOfMonth = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
//如果是闰年则返回true
function runNian(yearNum) {
if (yearNum % 4 == 0 && yearNum % 100 != 0 || yearNum % 400 == 0) {
return true;
} else {
return false;
}
}
//这里让每个月的日期生成，传入年份，月份
function outPutli(yearStr, monthStr) {
var str = "";
var yearNum = Number(yearStr); //转成数字类型
var monthNum = Number(monthStr) - 1; //js的月份从0开始，也就是0代表一月，1代表二月
var firstDayDate = new Date(yearNum, monthNum, 1).getDay(); //获取月份第一天礼拜几
var previousMonth = monthNum - 1; //上个月的月份
// 上个月的天数计算
var previousdayCount = runNian(yearNum) ? yearMonthDayRun[previousMonth] : yearMonthDay[previousMonth];
//传入月份的天数计算
var theDayCount = runNian(yearNum) ? yearMonthDayRun[monthNum] : yearMonthDay[monthNum];
//如果当前月是一月，那上个月就是上一年的12月
if (monthNum == 0) {
var previousMonth = 11;
var previousdayCount = runNian(yearNum - 1) ? yearMonthDayRun[previousMonth] : yearMonthDay[previousMonth];
}
//算出传入月份的第一天礼拜几，就知道上个月的末尾有几天是在1号前面
for (var i = previousdayCount - firstDayDate + 1; i <= previousdayCount; i++) {
str += "<li class='preMounth'>" + i + "</li>";
}
//生产传入月份的各个天数
for (var i = 1; i <= theDayCount; i++) {
// 如果等于现在的日期，给个蓝色底
if (yearNum == nowyear && monthNum == nowmonth && i == nowdate) {
str += "<li class='innow'>" + i + "</li>";
}
// 如果都是已经过去的日期，就淡化文字颜色
else if (yearNum < nowyear || yearNum == nowyear && monthNum < nowmonth || yearNum == nowyear && monthNum == nowmonth && i < nowdate) {
str += "<li class='passed'>" + i + "</li>";
} else {
str += "<li>" + i + "</li>";
}
}
odate.innerHTML = str;
}
outPutli(nowyear, nowmonth + 1)
var oYearBtn = document.getElementById('yearWrp');
var oYearList = document.getElementById('yearList');
var aBtnYear = oYearList.getElementsByTagName('a');
//年份按钮点击的时候生成相对于现在，前16年和后36年的年份
oYearBtn.onclick = function() {
var yearNumber = Number(nowyear);
var strs = "";
for (var i = 16; i >= 0; i--) {
// 因为a是代码生成的，所以绑定的事件要一并写上才有效果
strs += "<a href='javascript:;' onclick='yearSelect(this)'>" + (yearNumber - i) + "</a>";
}
for (var i = 1; i <= 36; i++) {
strs += "<a href='javascript:;' onclick='yearSelect(this)'>" + (yearNumber + i) + "</a>";
}
oYearList.innerHTML = strs;
oYearList.style.display = "block";
}
// 年份选择后的操作，月份默认为当年一月
function yearSelect(_this) {
oYearBtn.innerHTML = _this.innerHTML;
oYearList.style.display = 'none';
outPutli(_this.innerHTML, 1);
olunaName.setAttribute('data-mouthNum', 1);
olunaName.getElementsByTagName('h2')[0].innerText = chineseNameOfMonth[0];
olunaName.getElementsByTagName('h3')[0].innerText = englishNameOfMonth[0];
}
var oltArr = document.getElementById('ltArr');
var ortArr = document.getElementById('rtArr');
var olunaName = document.getElementsByClassName('lunaName')[0];
// 改变月份的显示
function changeTheMonthName(numberMonth) {
olunaName.setAttribute('data-mouthNum', numberMonth);
olunaName.getElementsByTagName('h2')[0].innerText = chineseNameOfMonth[numberMonth - 1];
olunaName.getElementsByTagName('h3')[0].innerText = englishNameOfMonth[numberMonth - 1];
}
//左箭头点击时效果，月份减
oltArr.onclick = function() {
var numberMonth = olunaName.getAttribute('data-mouthNum');
if (numberMonth > 1) {
numberMonth--;
}
outPutli(oYearBtn.innerHTML, numberMonth);
changeTheMonthName(numberMonth);
}
//右箭头点击时效果，月份加
ortArr.onclick = function() {
var numberMonth = olunaName.getAttribute('data-mouthNum');
if (numberMonth < 12) {
numberMonth++;
}
outPutli(oYearBtn.innerHTML, numberMonth);
changeTheMonthName(numberMonth);
}
算是加了比较详细的备注，小伙伴有兴趣的，可以慢慢研究下。若有不足，还请多多指教！
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
网友评论