今天给大家介绍下做的一个简单日历：
预览效果图
捕获.PNG
第一步 ：html代码
<html>
<head>
<meta charset="utf-8">
<title>日历</title>
<link rel="stylesheet" type="text/css" href="css/rili.css" />
</head>
<body>
<div class="cal" style="font-size: 20px;">
<div>
<button title="上一年">«</button><button title="上一月">‹</button><span></span><button title="下一月">›</button><button title="下一年">»</button>
</div>
<ul>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul>
</ul>
<div style="clear:both ;">
</div>
</div>
<input type="date" />
<script type="text/javascript">
let cal = document.querySelector(".cal");
var createCal = function(title, ul, year, month) {
let d = new Date(year, month, 1);
title.textContent = d.getFullYear() + "年" + ("00" + (d.getMonth() + 1)).substr(-2) + "月";
ul.innerHTML = "";
for (let i = 0; i < d.getDay(); i++) {
ul.appendChild(document.createElement("li"));
}
d.setMonth(d.getMonth() + 1);
d.setDate(0);
let max = d.getDate();
for (let i = 1; i <= max; i++) {
let li = document.createElement("li");
li.textContent = i;
if (i == 7) {
li.classList.add("selected");
}
li.onclick = function() {
alert(li.textContent);
}
ul.appendChild(li);
}
}
let title = cal.querySelector("span");
let ul = cal.querySelector("ul:nth-child(3)");
let curentDate = new Date();
curentDate = new Date(curentDate.getFullYear(), curentDate.getMonth(), curentDate.getDate()); //只含年月日
createCal(title, ul, curentDate.getFullYear(), curentDate.getMonth());
let btns = cal.querySelectorAll("button");
console.info(btns);
btns[0].onclick = function() {
curentDate.setFullYear(curentDate.getFullYear() - 1);
createCal(title, ul, curentDate.getFullYear(), curentDate.getMonth());
}
btns[1].onclick = function() {
curentDate.setMonth(curentDate.getMonth() - 1);
createCal(title, ul, curentDate.getFullYear(), curentDate.getMonth());
}
btns[2].onclick = function() {
curentDate.setMonth(curentDate.getMonth() + 1);
createCal(title, ul, curentDate.getFullYear(), curentDate.getMonth());
}
btns[3].onclick = function() {
curentDate.setFullYear(curentDate.getFullYear() + 1);
createCal(title, ul, curentDate.getFullYear(), curentDate.getMonth());
}
</script>
</body>
</html>
第二步css代码
@charset "utf-8";
* {
outline: none;
list-style: none;
padding: 0;
margin: 0;
border: none;
box-sizing:border-box;
border-radius: 0.3em;
color: #333;
user-select: none;
font-family: "微软雅黑";s
}
.cal {
width: 15.8em;
box-sizing: border-box;
border: 1px solid #000;
padding: 0.1em;
}
.cal li {
float: left;
border: 1px solid #000;
width: 2em;
height: 2em;
margin: 0.1em;
text-align: center;
line-height: 2;
}
.cal li:empty {
border-color: transparent;
}
.cal li:nth-child(7n+1){
color: #CC0000;
border-color: #CC0000;
}
.cal li:nth-child(7n+1):empty {
border-color: transparent;
}
.cal li:nth-of-type(7n){
color: #aaff00;
border-color:#aaff00 ;
}
.cal>ul:nth-of-type(2)>li:not(:empty):hover{
border-color: #0000000;
color: #000000;
cursor: pointer;
transform: scale(1.1);
background-image: linear-gradient(#FFFFFF,#cccccc);
font-weight: bold;
}
.cal li:hover {
/* background-color: yellow; */
transform: scale(1.1,1.1);
box-shadow: 0 0 10px #000000;
cursor: pointer;
}
.cal>div:nth-child(1) {
text-align: center;
font-size: 1.5em;
padding: 0;
}
.cal button:hover {
/* background-color: red; */
transform: scale(1.1,1.1);
box-shadow: 0 0 10px #000000;
cursor: pointer;
font-weight: bold;
}
