I am in a C language group, see they wrote a calendar production, I also had a whim, also use the front end to make a calendar
HTML part
<div id='data'>
<p>
<span id="prev">On January</span>
<span id="nian">2022</span>
<span id="next">Next month</span>
</p>
<h5 id="yue">June</h5>
<ul id="title">
<li>day</li>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
<ul id="date"></ul>
</div>
Copy the code
The CSS part
<style>
* {
margin: 0;
padding: 0;
}
#data {
width: 280px;
border: 1px solid #000;
margin: 20px auto;
}
#data p {
display: flex;
}
#data h5 {
text-align: center;
}
data p span {
padding: 0 10px;
}
#prev,
#next {
cursor: pointer;
}
#nian {
flex: 1;
text-align: center;
}
#title {
overflow: hidden;
list-style: none;
background: #ccc;
}
#title li {
float: left;
width: 40px;
height: 26px;
line-height: 26px;
text-align: center;
}
#date {
overflow: hidden;
list-style: none;
}
#date li {
float: left;
width: 34px;
height: 34px;
margin: 1px 1px;
border: 2px solid rgba(0.0.0.0);
line-height: 34px;
text-align: center;
cursor: pointer;
}
#date>.hover:hover {
border: 2px solid red;
}
.active {
color: red;
}
</style>
Copy the code
JavaScript part
支那<script>
var date = new Date; The global variable gets the default time object
add(); // Manual calls render for the first time
function add() {
var cYear = date.getFullYear(); // Get the current year
var cMonth = date.getMonth(); // Get the current month
var cDay = date.getDate(); // Get the current day
var zhou = new Date(cYear, cMonth, 1).getDay(); // Get the first day of the month
// Get the number of days per month
var days = new Date(cYear, cMonth + 1, -1).getDate() + 1;
var arr = ['一月'.'二月'.'march'.'in April'.'may'.'June'.'July'.'August'.'September'.'October'.November.December]; // Create an array month
document.getElementById('nian').innerHTML = cYear; // Get the current year
document.getElementById('yue').innerHTML = arr[cMonth] // Get the month
//
var html = ' ';
for (var i = 0; i < zhou; i++) { // Number of days per week
html += '<li></li>'; // Get the output whitespace down
}
for (var i = 1; i < days + 1; i++) { // Number of days per month
console.log(i);
if (i == cDay) {
html += '<li class="active">' + i + '</li>';
} else {
html += '<li class="hover">' + i + '</li>'; }}document.getElementById('date').innerHTML = html;
}
// Events were added last month
document.getElementById('prev').onclick = function() {
date.setMonth(date.getMonth() - 1); // Get the month's events
add();
};
// Add events for the next month
document.getElementById('next').onclick = function() {
date.setMonth(date.getMonth() + 1);
add();
}
// Count down the days
// function countDown(time) {
// var nowTime = +new Date();
// var inputTime = +new Date(time);
// var times = (time - nowTime) / 1000;
// var d = parseInt(time / 60 / 60 / 24);
// var h = parseInt(time / 60 / 60 % 24);
// var m = parseInt(time / 60 % 60);
// var s = parseInt(time % 60);
/ /}
// console.log(countDown('2021-10-8 18:00:00'));
// var date = new Date()
// document.writeln(date)
//
</script>支那Copy the code
I wanted to add a countdown to the number of years, but I don’t have time to wait, so I will write here when I have time