闲来无事写了一个小小的前端日历记录一下

最新推荐文章于 2024-03-31 21:03:12 发布

weixin_37956897

最新推荐文章于 2024-03-31 21:03:12 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

分类专栏：学习记录

本文链接：https://blog.youkuaiyun.com/weixin_37956897/article/details/79276652

学习记录专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的自定义日历组件。该组件能够动态显示指定月份的日历，并允许用户通过点击选择特定日期，同时记录所选日期的数量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: .14rem;
}
#calendar{
margin: 10px 0;
width: 100%;
text-align: center;
}
#calendar p{
font-size: .4rem;
position: relative;
}
#calendar p a{
text-decoration: none;
color: #000;
font-size: .2rem;
position: absolute;
height: 100%;
font-size: .2rem;
}
#calendar p a:nth-child(1){
left: 6%;
}
#calendar p a:nth-child(4){
right: 6%;
}
#calendar h5 span{
display: inline-block;
width: 13.2%;
margin: 0.5%;
}
#calendar .calendar_data{
width: 100%;
overflow: hidden;
}
#calendar .calendar_data div{
width: 10.2%;
margin: 2%;
display: block;
float: left;
overflow: hidden;
border-radius: 50%;
}
#calendar .addcolor{
background: red;
color: #fff;
}
#calendar .addcolor2{
background: blue;
color: #fff;
}
</style>
<title></title>
</head>
<body>
<div id="calendar">
<p><a id="calendar_left" href="javascript:void(0)"><</a> <span id="m">2</span>/<span id="y">2018</span><a id="calendar_right" href="javascript:void(0)">></a></p>
<h5><span>MO</span><span>TU</span><span>WE</span><span>TH</span><span>FR</span><span>SA</span><span>SU</span></h5>
<div class="calendar_data">

</div>
<p>已经选择 <span id="days">

</span>天</p>
</div>
</body>
</html>
<script type="text/javascript">
var Y=new (function Y(){
this.pop=[]
if(typeof Y.prototype.calendar!="function"){
Y.prototype.calendar=function(ele,y,m,pop){
var date=new Date();
date.setFullYear(y,m-1,1)
weekday=date.getDay()
var html=""
var day,day2=1
if (m==1||m==3||m==5||m==7||m==8||m==10||m==12) {
day=31
} else if(m==4||m==6|m==9|m==11){
day=30
}
else if(m==2&&y%4 == 0&& y % 100 != 0||y % 400 ==0){
day=29
}
else{
day=28
}
for(var i=0;i<42;i++){
if(i<weekday-1){
html+="<div></div>"
}else{
html+="<div>"+day2+"</div>"
day2++
if(day2-1==day){
break;
}
}
}
ele.innerHTML=html
var Ythis=this
var Div=ele.getElementsByTagName("div")
var Div_len=Div.length
for(var i=0;i<this.pop.length;i++){
if(this.pop[i].year==y&&this.pop[i].mos==m){
Div[this.pop[i].da].className="addcolor"
}
}
for(var i=0;i<Div_len;i++){
Div[i].style.height=Div[0].offsetWidth+"px"
Div[i].style.lineHeight=Div[0].offsetWidth+"px"
Div[i].onclick=function(){

Div=Array.prototype.slice.call(Div)

if(this.innerText==""){
return
}

if(this.className=="addcolor"){
this.className=""
for(var i=0;i<Ythis.pop.length;i++){
if(Ythis.pop[i].year==y&&Ythis.pop[i].mos==m&&Ythis.pop[i].da==Div.indexOf(this)){
Div[Ythis.pop[i].da].className=""
Ythis.pop.splice(i, 1);
}
}
}
else{
this.className="addcolor"
var obj={
year:y,
mos:m,
da:Div.indexOf(this)
}
Ythis.pop.push(obj)
}
console.log(Ythis.pop.length)
document.getElementById("days").innerText=Ythis.pop.length
}
}
window.onresize=function(){
for(var i=0;i<Div_len;i++){
Div[i].style.height=Div[0].offsetWidth+"px"
Div[i].style.lineHeight=Div[0].offsetWidth+"px"
}
}
}
}
if(typeof Y.prototype.winSize!="function"){
Y.prototype.winSize=function(doc,win){
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
clientWidth,
recalc = function() {
clientWidth = docEl.clientWidth;
if(!clientWidth) return;
if(!doc.addEventListener) return;
if(clientWidth < 750) {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
} else {
docEl.style.fontSize = 100 + 'px';
}
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
}
})()
Y.winSize(document, window)
window.onload=function(){
var data=document.getElementsByClassName("calendar_data")[0]
var m=document.getElementById("m")
var y=document.getElementById("y")
var left=document.getElementById("calendar_left")
var right=document.getElementById("calendar_right")
Y.calendar(data,y.innerText,m.innerText)
left.onclick=function(){
var m_t=m.innerText
var y_t=y.innerText
m_t--
if(m_t==0){
y.innerText=y_t*1-1
m.innerText=12
}
else{
m.innerText=m_t*1
}
var m_tn=m.innerText
var y_tn=y.innerText
Y.calendar(data,y_tn*1,m_tn*1)
}
right.onclick=function(){
var m_t=m.innerText
var y_t=y.innerText
m_t++
if(m_t==13){
y.innerText=y_t*1+1
m.innerText=1
}
else{
m.innerText=m_t*1
}
var m_tn=m.innerText
var y_tn=y.innerText
Y.calendar(data,y_tn*1,m_tn*1)
}
}

</script>

写的很烂也不太懂优化想起啥来写点啥