<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>日历</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main {
width: 500px;
height: 300px;
border: 1px solid grey;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.title {
height: 30px;
width: 100%;
list-style: none;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #e5e5e5;
}
.weekdays {
width: 100%;
list-style: none;
display: flex;
flex-direction: row;
text-align: center;
padding: 10px 0;
}
.weekdays li {
flex: 1;
}
.info {
margin-top: 6px;
}
.info ul {
width: 100%;
list-style: none;
display: flex;
flex-direction: row;
text-align: center;
padding: 10px 0;
}
.info ul li {
flex: 1;
}
.btn {
width: 100%;
margin-top: 20px;
}
.btn div {
width: 80px;
height: 30px;
margin: 0 auto;
border: 1px solid skyblue;
text-align: center;
line-height: 30px;
border-radius: 10px;
background: #87ceff;
}
</style>
</head>
<body>
<div class="main">
<ul class="title">
<!-- <li>456645</li> -->
</ul>
<ul class="weekdays">
<li>周日</li>
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
</ul>
<div class="info"></div>
</div>
<div class="btn">
<div οnclick="signIn()">签到</div>
</div>
</body>
<script>
window.onload = function() {
var time = new Date()
var year = time.getFullYear() //年
var month = time.getMonth() + 1 //月
var day = time.getDate() //日
var toDay = time.getDay() //周几
var firstDay = new Date(year + '-' + month + '-1').getDay() //月初周几
var totalDay = new Date(year, month, 0).getDate() //当月总天数
var agoDays = new Date(year, time.getMonth(), 0).getDate() //上月总天数
var arrMonth = new Array()
var count = 0
document.getElementsByClassName('title')[0].innerHTML =
'<li>' + year + '年' + month + '月' + '</li>'
for (let i = 0; i < 5; i++) {
arrMonth[i] = new Array(7)
}
for (let m = 0; m < 5; m++) {
for (let n = 0; n < 7; n++) {
if (m === 0 && n < firstDay) {
arrMonth[m][n] = n - firstDay + 1 + agoDays
} else {
if (count !== totalDay) {
arrMonth[m][n] = ++count
} else {
count = 1
arrMonth[m][n] = count
}
}
}
}
count = 0
var html = ''
let flag = false
let flag2 = false
for (let i = 0; i < 5; i++) {
html += '<ul class="month">'
for (let j = 0; j < 7; j++) {
if (!flag2) {
html +=
'<li ><span style="display:inline-block;width:30px;background:#EAEAEA;">' +
arrMonth[i][j] +
'</span></li>'
if (i === 0 && arrMonth[i][j + 1] === 1) {
flag2 = true
}
} else {
if (!flag) {
html +=
'<li ><span style="display:inline-block;width:30px;background:coral;">' +
arrMonth[i][j] +
'</span></li>'
if (arrMonth[i][j] === totalDay) {
flag = true
}
} else {
html +=
'<li ><span style="display:inline-block;width:30px;background:#EAEAEA;">' +
arrMonth[i][j] +
'</span></li>'
}
}
}
html += '</ul>'
}
document.getElementsByClassName('info')[0].innerHTML = html
}
function signIn() {
let time = new Date()
let day = time.getDate() //日
var ul = document.getElementsByClassName('month')
for (let i = 0; i < ul.length; i++) {
let li = ul[i].querySelectorAll('li')
for (let j = 0; j < li.length; j++) {
if (li[j].innerText === day.toString()) {
li[j].querySelector('span').style.borderRadius = '20px'
}
}
}
setTimeout(function() {
alert('您已获取3京豆')
}, 600)
}
</script>
</html>
1945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
