之前做的旅游小程序,有需求是要把今年所有有票的月份及日期价格显示出来,大概如下图:
现在JS写,整理一下代码:
<div id="calendar" class="calendar">
<div class="selNowDays"></div>
<div class="months">
<strong id="pre" class="pre">«</strong>
<div class="months-outer">
<div class="months-con-outer">
<div class="months-con"></div>
</div>
</div>
<strong id="next" class="next">»</strong>
</div>
<div class="weeks"></div>
<div class="days">
</div>
</div>
@charset 'utf-8';
.calendar {
width: 320px;
}
.selNowDays {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
font-size: 16px;
}
.months {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
}
.months strong {
width: 8%;
text-align: center;
}
.months-outer {
overflow: hidden;
width: 84%;
height: 36px;
}
.months-con-outer {
width: 100%;
height: 52px;
overflow-x: auto;
}
.months-con {
display: inline-block;
white-space: nowrap;
height: 100%;
}
.months-con span {
display: inline-block;
height: 36px;
padding: 0 5px;
line-height: 36px;
font-size: 14px;
cursor: pointer;
}
.months-con .sel-month {
color: #fff;
background: #3cf;
}
.weeks {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.weeks span {
display: flex;
align-items: center;
justify-content: center;
width: 20%;
height: 34px;
color: #fff;
font-size: 14px;
background: #3cf;
}
.days {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.days span {
display: flex;
align-items: center;
justify-content: center;
width: 45.5px;
height: 45.5px;
cursor: pointer;
}
.days .has-day {
background: #ffc033;
-moz-box-shadow: inset 0px 0px 1px #ffc033;
-webkit-box-shadow: inset 0px 0px 1px #ffc033;
box-shadow: inset 0px 0px 1px #ffc033;
}
.days .today-day {
background: #9cd8ec;
-moz-box-shadow: inset 0px 0px 1px #9cd8ec;
-webkit-box-shadow: inset 0px 0px 1px #9cd8ec;
box-shadow: inset 0px 0px 1px #9cd8ec;
}
.days .sel-day {
-moz-box-shadow: inset 0px 0px 1px #d45b2d;
-webkit-box-shadow: inset 0px 0px 1px #d45b2d;
box-shadow: inset 0px 0px 1px #d45b2d;
}
var weeks = ['日', '一', '二', '三', '四', '五', '六'];
var months = ['2018-12-01', '2018-12-20', '2019-01-02', '2019-01-12', '2019-02-04', '2019-02-14', '2019-03-23', '2019-04-12', '2019-06-30']
var monthList = months;
var calendar = document.getElementById('calendar');
var monthsHtml = document.querySelector('#calendar .months-con');
var weeksHtml = document.querySelector('#calendar .weeks');
var daysHtml = document.querySelector('#calendar .days');
var selDayHtml = document.querySelector('.selNowDays')
var pre = document.querySelector('#pre');
var next = document.querySelector('#next');
var nowSelYear = null;
var nowSelMonth = null;
var nowSelDay = null;
var nowMonthIndex = 0;
// 月份显示
function getMonths(ind) {
var str = ''
var css = ''
var monthArr = uniq(months)
for (let i = 0; i < monthArr.length; i++) {
if (i === parseInt(ind)) {
css = 'sel-month'
nowSelYear = monthArr[i].substring(0, 4)
nowSelMonth = monthArr[i].substring(5, 7)
} else {
css = ''
}
str += `<span data-index=` + i + ` class="` + css + `">` + monthArr[i].substring(0, 4) + '年' + monthArr[i].substring(
5, 7) + `月</span>`
}
return str
}
monthsHtml.innerHTML = getMonths(nowMonthIndex)
// 去重
function uniq(array) {
var temp = [];
var index = [];
var l = array.length;
for (var i = 0; i < l; i++) {
for (var j = i + 1; j < l; j++) {
if (array[i].substring(0, 7) === array[j].substring(0, 7)) {
i++;
j = i;
}
}
temp.push(array[i]);
index.push(i);
}
return temp;
}
// 星期显示
function getWeeks() {
var str = ''
for (let i = 0; i < weeks.length; i++) {
str += `<span>` + weeks[i] + `</span>`
}
return str
}
weeksHtml.innerHTML = getWeeks()
// 日期显示
function getDays(year, month) {
var days = getThisMonthDays(year, month)
var daysFirst = getFirstDayOfWeek(year, month)
var str = ''
var str2 = ''
var css = ''
var css2 = ''
// 当前时间
var date = formartDate(new Date())
nowSelDay = nowSelDay ? nowSelDay : 1
for (let i = 1; i <= daysFirst; i++) {
str2 += '<span></span>'
}
for (let i = 1; i <= days; i++) {
if (nowSelYear == date.substring(0, 4) && nowSelMonth == date.substring(5, 7) && i == date.substring(8, 10)) {
css = 'today-day'
} else {
css = ''
}
if (nowSelDay == i) {
css2 = 'sel-day'
} else {
css2 = ''
}
for (let j = 0; j < months.length; j++) {
if (nowSelYear == months[j].substring(0, 4) && nowSelMonth == months[j].substring(5, 7) && i == months[j].substring(
8, 10)) {
css = 'has-day'
}
}
str += `<span data-days="` + i + `" class="` + css + ` ` + css2 + `">` + i + `</span>`
}
return str2 + str
}
daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
// 长时间转时间字符串
function formartDate(param) {
const date = new Date(param)
const Y = date.getFullYear() + '-'
const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
return Y + M + D
}
// 当月第一天在周几
function getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
// 当月总天数
function getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
}
// 上一个月
function preMonth() {
if (nowMonthIndex == 0) {
return
} else {
nowMonthIndex--
nowSelDay = 1
monthsHtml.innerHTML = getMonths(nowMonthIndex)
daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
selDayHtml.innerHTML = nowSelDate()
}
}
// 下一个月
function nextMonth() {
if (nowMonthIndex == uniq(months).length - 1) {
return
} else {
nowMonthIndex++
nowSelDay = 1
monthsHtml.innerHTML = getMonths(nowMonthIndex)
daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
selDayHtml.innerHTML = nowSelDate()
}
}
// 当前选中的日期
function nowSelDate() {
var str = ''
str = `选择日期:` + nowSelYear + `年` + nowSelMonth + `月` + nowSelDay + `日`
return str
}
selDayHtml.innerHTML = nowSelDate()
window.onload = function () {
// 月份切换
document.querySelector('.months-con').onclick = function (ev) {
var ev = ev || window.event
var target = ev.target || ev.srcElement
if (target.nodeName.toLowerCase() == 'span') {
if (target.className == 'sel-month') {
return
} else {
nowMonthIndex = target.dataset.index
monthsHtml.innerHTML = getMonths(target.dataset.index)
daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
selDayHtml.innerHTML = nowSelDate()
}
}
}
// 日期切换
document.querySelector('.days').onclick = function (ev) {
var ev = ev || window.event
var target = ev.target || ev.srcElement
if (target.nodeName.toLowerCase() == 'span') {
nowSelDay = target.dataset.days
daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
selDayHtml.innerHTML = nowSelDate()
}
}
// 上一个月
document.getElementById('pre').onclick = function () {
preMonth()
}
// 下一个月
document.getElementById('next').onclick = function () {
nextMonth()
}
}