<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历</title>
<style>
.calendar{
width:250px;
border:1px solid #000;
}
.calendar .header{
width: 100%;
height:50px;
margin-top: -15px;
}
.calendar .header .pre ,.next{
display: inline-block;
width: 13%;
height: 30px;
text-align: center;
cursor: pointer;
}
.calendar .header .title{
display: inline-block;
width: 70%;
height: 30px;
text-align: center;
}
.calendar .week{
width: 240px;
height: 30px;
margin-top: 6px;
margin-left: 5px;
padding-left: 0px;
list-style: none;
border-bottom: 1px solid #000;
}
.calendar .week li{
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
}
.calendar .datelist{
width: 240px;
height: 210px;
margin-left: 5px;
padding-left: 0px;
list-style: none;
}
.calendar .datelist li{
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin:5px 1px 0 3px;/上 右 下 左/
}
.today{
background: orange;
border-radius: 50%;
color: #fff;
}
.weekend{
color:#f00;
}
.last{
color:#999;
}
</style>
</head>
<body>
<div class="calendar">
<div class="header">
<span class="pre"><</span>
<div class="title"><h4></h4></div>
<span class="next">></span>
</div>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="datelist"></ul>
</div>
</body>
<script>
let now=0;
const background=[
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843372677&di=18bda9ad6a232b57db804bc361d9c3ad&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fc%2F5879d44457178.jpg%3Fdown"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843372673&di=104e951978c6ab60ad53d2459d179373&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F58ac0d1527daf.jpg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843436876&di=d4dc1d121e0de523fe8e70ee5fff0a31&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171007%2F2eca8a08a1f14ea1b52744ea3a92b0cc.jpeg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843436875&di=62e35be282f050073121978f4b770b15&imgtype=0&src=http%3A%2F%2Fi6.download.fd.pchome.net%2Ft_768x1280%2Fg1%2FM00%2F0A%2F10%2FoYYBAFPkRb6ISUVtAAi2jHEMbi8AAB04wPMeNMACLak684.jpg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843436870&di=e0e5aa509ae2d4f82245b4f3a4811f43&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6ed0a12fff83f7d22690e7af7cfcaad571cbed0b46490-7dl83q_fw658"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843436868&di=a28fbb240754cac3c98f16432a6f8428&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201505%2F30%2F20150530031859_84iQr.thumb.700_0.jpeg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843436864&di=21b22751843864bbec91bb10ed76454c&imgtype=0&src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F15716%2F15715458_0800.jpg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843436864&di=f7a2f19ee14cccebbb2de67bf688fa0f&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201601%2F22%2F20160122084357_PZrLv.thumb.700_0.jpeg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843534273&di=e035a70cad740f1279e29d7b3273a7d8&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201505%2F30%2F20150530031240_SEV2j.thumb.700_0.jpeg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843534271&di=5f712680ef0aa7a7ddce09f78f3c262c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F27%2F20180527121434_ibdot.thumb.700_0.jpg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843534269&di=942ea45d895c50d810ca1572ac01edf2&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8694a4c27d1ed21bfec6c433a96eddc450da3fdd.jpg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843562701&di=9f120ce7a9bb9fdbced3f98aed9e5245&imgtype=jpg&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170728%2Fe5e0d1bea745400594ead95ce5050f2f_th.jpg"},
{src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550843534257&di=0a49f75eec120e197aa509a4a2c2fb11&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01163358515492a8012060c849ba66.jpg%401280w_1l_2o_100sh.jpg"},
]
const pre=document.querySelector(".pre");
const next=document.querySelector(".next");
var dateShow=(n)=>{
let date=new Date();//获取日期
date.setMonth(date.getMonth()+n);//设置月份
let year=date.getFullYear();//年
let month=date.getMonth()+1;//月
let day=date.getDate();//日
//判断本月第一天是星期几
date.setDate(1); //时间调整到本月第一天
let week = date.getDay(); //读取本月第一天是星期几
if(month==0){
month=12;
year--;
}else if(month>12){
year++;
}
let allday=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month-1];
//判断闰年
if(month == 2) {
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
allDay = 29;
}
}
let header=document.querySelector(".header h4");
let datelist=document.querySelector(".datelist");
header.innerHTML=year+'年'+month+'月';
let template=``;
for(let i=0;i<week;i++){
template +=<li> </li>;
}
for(let i=1;i<=allday;i++){
let thisday=i + week -1;
if(n<0 || n==0 && i<day){
template +=<li class='last'>${i}</li>;
}else if(n==0 && day==i){
template +=<li class='today'>${i}</li>;
}else{
if(thisday%7==0||thisday%7==6){
template +=<li class='weekend'>${i}</li>;
}else{
template +=<li>${i}</li>;
}
}
}
datelist.innerHTML=template;
const calendar=document.querySelector('.calendar');
calendar.style.backgroundImage = "url("+background[month-1].src+")"
}
dateShow(0);
pre.onclick=()=>{
now--;
dateShow(now);};
next.onclick=()=>{
now++;
dateShow(now);};
</script>
</html>
效果图：
