代码中有注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日历</title>
<style type="text/css">
html,body{
background-color: antiquewhite;
}
/* 整个框框 */
.main-wrap {
width: 700px;
background-color: ;
margin: 0px auto;
}
/* 框框头,星期几 */
.main-wrap .head {
width: 700px;
text-align: center;
}
.main-wrap .head .head-item {
width: 100px;
float: left;
font-size: 30px;
border-radius: 100px;
background-color: #8A2BE2;
}
/* 每天的格子 */
.main-wrap .body .day-item {
width: 100px;
height: 100px;
float: left;
/* line-height: 100px; */
font-size: 20px;
text-align: center;
border-radius: 100px;
}
/* 每个月初不一定一号是周一,用这个空出来 */
.main-wrap .body .gap {
width: 500px;
height: 2px;
float: left;
}
#header{
width: 100%;
margin: 50px auto 20px auto;
/* background-color: white; */
font-size: 40px;
text-align: center;
}
.anniu{
width: 100%;
position: relative;
}
#next-month{
position: absolute;
top: 10px;
right: 40px;
background-color: #FAEBD7;
font-size: 18px;
border: white solid 1px;
}
#pre-month{
position: absolute;
top: 10px;
left: 40px;
background-color: #FAEBD7;
list-style: none;
font-size: 18px;
border: white solid 1px;
}
.back{
width: 700px;
height: 30px;
margin: 0px auto;
position: relative;
}
#backNowMonth{
font-size: 18px;
background-color: #FAEBD7;
position: absolute;
top: 10px;
right: 40px;
border: white solid 1px;
}
.event-item{
white-space: wrap;
font-size: 0.5em;
color: blueviolet;
/* overflow: hidden; */
}
#add-event{
height: 100px;
width: 150px;
background-color: burlywood;
position: fixed;
top: 200px;
left: 10px;
color: blueviolet;
text-align: center;
line-height: 100px;
font-size: 20px;
}
#add-event:hover{
box-shadow: 0px 8px 8px brown;
}
</style>
</head>
<body>
<div class="back">
<button type="button" id="backNowMonth">回到本月</button>
</div>
<div class="main-wrap" >
<div class="anniu" >
<button type="button" id="next-month">下一月</button>
<button type="button" id="pre-month">上一月</button>
</div>
<div class="header" id="header">
</div>
<!-- 脑袋 -->
<div class="head">
<div class="head-item">
周日
</div>
<div class="head-item">
周一
</div>
<div class="head-item">
周二
</div>
<div class="head-item">
周三
</div>
<div class="head-item">
周四
</div>
<div class="head-item">
周五
</div>
<div class="head-item">
周六
</div>
</div>
<!-- 身子 -->
<div class="body" id="body">
<div class="gap" id="">
</div>
<!-- <div class="day-item">1</div>
<div class="day-item">2</div>
<div class="day-item">3</div>
<div class="day-item">4</div>
<div class="day-item">5</div>
<div class="day-item">6</div>
<div class="day-item">7</div>
<div class="day-item">8</div>
<div class="day-item">9</div>
<div class="day-item">10</div>
<div class="day-item">11</div>
<div class="day-item">12</div>
<div class="day-item">13</div>
<div class="day-item">14</div>
<div class="day-item">15</div>
<div class="day-item">16</div>
<div class="day-item">17</div>
<div class="day-item">18</div>
<div class="day-item">19</div>
<div class="day-item">20</div>
<div class="day-item">21</div>
<div class="day-item">22</div>
<div class="day-item">23</div>
<div class="day-item">24</div>
<div class="day-item">25</div>
<div class="day-item">26</div>
<div class="day-item">27</div>
<div class="day-item">28</div>
<div class="day-item">29</div>
<div class="day-item">30</div>
<div class="day-item">31</div> -->
</div>
</div>
<div id="add-event">
添加事件
</div>
<script type="text/javascript">
//程序主题程序
//1,读取数据
//2,获取今天
//,3获取这个月的长度
//,4获取这个月的第一天周几
//5,渲染日历和时间
//页面跳转
//1,获取当前月份
//计算下个月是几号以及是否需要跨年
//,重新渲染
//添加页面
//1,获取要添加的事件
//2,添加事件到数组中
//3,保存数据
//4刷新页面
//怎么完成这个日立的
//1,获取一些月份的信息
//2,拼接字符串显示样式
//3, innerhtml方法插入到页面里
//当我们想去下个月时
//1,根据这个月推断下个月
//,重新拼接字符串和样式
//今日高亮
//获取今天日期
//对比年份和月份
//对循环的某一天处理
//待实现功能一
//要想点击某一天的事件使他弹出一个显示框(弹出一个页面会更好实现一点)
//1,点击弹出,再点击某个按钮关闭,
//2,将内容写在页面的正中央
//3,显示未完成和已完成,
//4,已完成的出现删除线
//5,能有个推向下一天的功能就好了,(目前看应该是点击推向下一天,获取该天的日期,让他的几号加一天,再填充到页面中(要判断推向下一天的时候是否会推向下一个月))
//6,关于推向下一天时候要判断的问题,应该是做一个if判断,在获取该事件的日期的时候,把他的年月日分别获取保存下来,在判断中判断日加一月份是否需要加一,年份是否需要加一.
//待实现功能二
//删除功能
//删除你想要删除的某一天的事件
//事件存储在localStorage中以对象格式存储,我们用JSON.parse(localStorage.content)来解析他,变成一个数组,用数组的splace()(希望么拼错)的方法删除数组的某一项
//分析
//localStorage有很多的内容,这里是获取里面的content内容
//1,点击删除按钮,程序运行首先获取一个数组格式的整个数组,并获取你点击的事件的content内容
//2,用循环开始判断,当content == 数组的某一项content时删除,不相等时跳过.
//3,删除完之后,我们重新刷新页面,获取数据再填充页面
//3.1,有一个粗暴的方法时直接将你点击事件替换成空字符串.但这样你并没有清除数据.而是覆盖了数据,这样会感觉很不舒服
var eventDate = [
{
content:'今天我吃饭了,还**了',
date : "2019-11-07 21:48:00",
},
{
content:'今天是个很差的日子,wodadja',
date : "2019-11-04 21:48:22",
},
{
content: '今天心情很差',
date: '2019-11-5 13:07:22'
}
]
var backNow = document.getElementById('backNowMonth')
var riliBody = document.getElementById('body')
var nowDisplayDate = {
};
var nextMonth = document.getElementById('next-month')
var preMonth = document.getElementById('pre-month')
//获取年份展示
var header = document.getElementById('header')
var getDaysOfMonth = function(year, month) {
if (typeof month == 'string') {
month = parseInt(month)
}
if (typeof month == 'number') {
if (month < 1 || month > 12) {
return alert('傻逼一年哪有' + month + '月')
}
} else {
return alert('傻逼')
}
var days = 0
if (typeof year == 'string') {
year = parseInt(year)
}
if (typeof year == 'number') {
if (year < 0) {
return alert('傻逼哪有' + month + '年')
}
} else {
return alert('傻逼')
}
var year = year ? year : (new Date()).getFullYear()
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
days = 31
}
if (month == 4 || month == 6 || month == 9 || month == 11) {
days = 30
}
if (month == 2) {
days = year % 4 == 0 ? 29 : 28;
}
return days
}
var getTheFirstDateOfThisMonthIsWhichDay = function(year, month) {
var dateStr = year + '-' + month + '-' + '01'
console.log(dateStr)
var firstDateOfThisMonth = new Date(dateStr)
var days = firstDateOfThisMonth.getDay()
console.log(days)
return days
}
//预处理事件
var processEvent = function(year,month){
var thisMonthEvent = []
//var now = new Date()
eventDate.forEach(function(item,index){
//var d = new Date(item.date)
//var dMonth=d.getMonth()
var itemDate = new Date(item.date)
// console.log(month,now.getMonth())
if(month == itemDate.getMonth()+1 && year == itemDate.getFullYear()){
thisMonthEvent.push(
{
year :itemDate.getFullYear(),
month:itemDate.getMonth(),
date:itemDate.getDate(),
hours : itemDate.getHours(),
min:itemDate.getMinutes(),
sec:itemDate.getSeconds(),
content : item.content
}
);
}
// console.log(dMonth==now.getMonth())
})
// console.log(dMonth==now.getMonth())
return thisMonthEvent
}
//把拼接字符串以及填充到页面中
var render = function(year, month) {
//判断是否本月
var thisMonthEvent = processEvent(year,month)
// var isEventEmpty = false
// if(thisMonthEvent.length == 0){
// isEventEmpty = true
// //这个月没事
// }
console.log(thisMonthEvent)
var today = new Date()
var isThisMonth = false
if(month == today.getMonth()+1 && year == today.getFullYear()){
isThisMonth = true
}
var dayCount = getDaysOfMonth(year, month)
var firstDay = getTheFirstDateOfThisMonthIsWhichDay(year, month)
var width = 0
var str = ''
var gap = '<div class="gap" style = "width:${%width%}px"></div>'
var tmp = '<div class="day-item" style = "${%color%}">&{%riqi%}号<br\>${%event%}</div>'
// console.log(width)
if (firstDay == 7) {
width = 0
} else {
width = firstDay * 100
}
// console.log(dayCount)
str += gap.replace('${%width%}', width)
for (var i = 0; i < dayCount ; i++) {
var emptyStr = '';
//高亮
if(isThisMonth && i+1 ==today.getDate()){
emptyStr = tmp.replace('&{%riqi%}', i+1).replace('${%color%}','background-color:#878787;color:white; border-radius: 100%; ')
}else{
emptyStr = tmp.replace('&{%riqi%}', i+1)
}
//添加事件,在for循环中,判断今天是否是今天
for(var j = 0;j<thisMonthEvent.length;j++){
// console.log(thisMonthEvent[j])
if(thisMonthEvent[j].date == i+1){
// console.log(thisMonthEvent.content)
emptyStr=emptyStr.replace('${%event%}','<span class="event-item">'+thisMonthEvent[j].content+'</span>')
}
// console.log(thisMonthEvent.content)
}
emptyStr=emptyStr.replace('${%event%}',' ')
//if(!isThisMonth){
// emptyStr=emptyStr.replace('${%event%}','无事')
// }
str += emptyStr
}
// console.log(str)
header.innerHTML = year+'-'+(month >9?month:'0'+month)+ '-'+((today.getDate())>9?(today.getDate()):'0'+(today.getDate()))
riliBody.innerHTML = str
// console.log(date)
// console.log(nowDisplayDate)
}
var init = function(date) {
var year = date.getFullYear();
var month = date.getMonth() +1;
nowDisplayDate = date;
render(year, month)
}
var goNextMonth = function() {
// console.log(nowDisplayDate)
var displayDate = {
year: nowDisplayDate.getFullYear(),
month: nowDisplayDate.getMonth(),
}
if(displayDate.month >=11){
displayDate.month = 0
displayDate.year ++
}else{
displayDate.month ++
}
console.log(displayDate.month+1 ,displayDate.year)
var nextMonth = displayDate.year + '-' + (displayDate.month + 1) + '-' + '01'
var nextDate = new Date(nextMonth)
init(nextDate)
}
var goPreMonth = function(){
var displayDate = {
year: nowDisplayDate.getFullYear(),
month: nowDisplayDate.getMonth(),
}
if(displayDate.month == 0){
displayDate.month = 11
displayDate.year--
}else{
displayDate.month--
}
console.log(displayDate.month+1 ,displayDate.year)
var nextMonth = displayDate.year + '-' + (displayDate.month + 1) + '-' + '01'
var nextDate = new Date(nextMonth)
init(nextDate)
}
nextMonth.addEventListener('click',function(){
nextMonth.style = 'border: white solid 1px;'
goNextMonth()
})
preMonth.addEventListener('click',function(){
preMonth.style = 'border: white solid 1px;'
goPreMonth()
})
backNow.addEventListener('click',function(){
init(new Date());
})
var loadEventDate = function(){
eventDate = JSON.parse( localStorage.getItem('eventDate'))
console.log(eventDate)
}
var saveEventDate = function(){
localStorage.setItem('eventDate', JSON.stringify(eventDate))
}
var reFresh = function(){
init(nowDisplayDate);
}
var addEvent = function(){
var event = prompt('请输入事件')
var date = prompt('请输入日期 (例:2019-11-7 20:39:33)')
var obj = {
date : date,
content :event
}
eventDate.push(obj);
saveEventDate();
reFresh()
}
// //删除某一项(无用)
// var content1='null'
// var deleteSomeoneDay = JSON.parse(localStorage.getItem('eventDate'))
// console.log(deleteSomeoneDay)
// for (var i = 0;i< deleteSomeoneDay.length; i++){
// if(deleteSomeoneDay.content[i] == content1){
// deleteSomeoneDay.splice(i,1)
// }
// }
// console.log(deleteSomeoneDay)
//添加事件
var addEventSomeoneDay = document.getElementById('add-event')
addEventSomeoneDay.addEventListener('click',function(){
addEvent()
})
var main = function(){
loadEventDate()
init(new Date());
}
main()
//年份翻页
//今日高亮
//回到本月
//记录事件
// goNextMonth()
</script>
</body>
</html>