js做的一个日历
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>日历</title><style>section {margin: 60px auto;width: 300px;height: 300px;border: 1px solid black;/*padding: 10px;*/font-size: 16px;}.padding-1{padding: 3px;}.padding-2{padding: 10px;}.d-flex {display: flex;}.just-betww {justify-content: space-between;}.just-round {justify-content: space-around;}.align-items-centen {align-items: center;}.text-center {text-align: center;}.background-ccc {background: #cccccc;}.border-1{border: 1px solid black;}.curos {cursor:pointer ;}.mix{width: 26px;height: 26px;margin: 5px 4px 4px 7px;border: 1px solid rgba(255,0,0,0);}.mix:hover{border: 1px solid red;}.flex-wrap {flex-wrap: wrap;}.visiti-hid{visibility: hidden;}.visiti-vi{visibility: visible;}.dis-none {display: none;}.day-bg{background: peru;}</style></head><body><section><div class="d-flex just-betww padding-1"><div class="curos" onclick=aboveMoth()>上一月</div><div><span id="myYear">2021</span></div><div class="curos" onclick=nextMoth()>下一月</div></div><div class="text-center"><span id="myMoth">九月</span></div><div class="background-ccc text-center d-flex just-round"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div><div class="padding-1 d-flex flex-wrap just-round text-center"><div class="mix visiti-hid curos" id="0"><span></span></div><div class="mix visiti-hid curos" id="1"><span></span></div><div class="mix visiti-hid curos" id="2"><span></span></div><div class="mix visiti-hid curos" id="3"><span></span></div><div class="mix visiti-hid curos" id="4"><span></span></div><div class="mix visiti-hid curos" id="5"><span></span></div><div class="mix visiti-hid curos" id="6"><span></span></div><div class="mix visiti-hid curos" id="7"><span></span></div><div class="mix visiti-hid curos" id="8"><span></span></div><div class="mix visiti-hid curos" id="9"><span></span></div><div class="mix visiti-hid curos" id="10"><span></span></div><div class="mix visiti-hid curos" id="11"><span></span></div><div class="mix visiti-hid curos" id="12"><span></span></div><div class="mix visiti-hid curos" id="13"><span></span></div><div class="mix visiti-hid curos" id="14"><span></span></div><div class="mix visiti-hid curos" id="15"><span></span></div><div class="mix visiti-hid curos" id="16"><span></span></div><div class="mix visiti-hid curos" id="17"><span></span></div><div class="mix visiti-hid curos" id="18"><span></span></div><div class="mix visiti-hid curos" id="19"><span></span></div><div class="mix visiti-hid curos" id="20"><span></span></div><div class="mix visiti-hid curos" id="21"><span></span></div><div class="mix visiti-hid curos" id="22"><span></span></div><div class="mix visiti-hid curos" id="23"><span></span></div><div class="mix visiti-hid curos" id="24"><span></span></div><div class="mix visiti-hid curos" id="25"><span></span></div><div class="mix visiti-hid curos" id="26"><span></span></div><div class="mix visiti-hid curos" id="27"><span></span></div><div class="mix visiti-hid curos" id="28"><span></span></div><div class="mix visiti-hid curos" id="29"><span></span></div><div class="mix visiti-hid curos" id="30"><span></span></div><div class="mix visiti-hid curos" id="31"><span></span></div><div class="mix visiti-hid curos" id="32"><span></span></div><div class="mix visiti-hid curos" id="33"><span></span></div><div class="mix visiti-hid curos" id="34"><span></span></div><div class="mix visiti-hid curos" id="35"><span></span></div><div class="mix visiti-hid curos" id="36"><span></span></div><div class="mix visiti-hid curos" id="37"><span></span></div><div class="mix visiti-hid curos" id="38"><span></span></div><div class="mix visiti-hid curos" id="39"><span></span></div><div class="mix visiti-hid curos" id="40"><span></span></div><div class="mix visiti-hid curos" id="41"><span></span></div></div></section><script>var myMoth=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];var myDate = new Date();var year =myDate.getFullYear();var moth = myDate.getMonth();var myDay = myDate.getDate();// console.log(myDay);// console.log(moth);giveFirst();function giveFirst(){var firstDate = new Date();var year =firstDate.getFullYear();var moth = firstDate.getMonth();// console.log(firstDate);document.getElementById('myYear').innerHTML=year;document.getElementById('myMoth').innerHTML=myMoth[moth];firstDate.setDate(1);var firstWeek=firstDate.getDay();firstDate.setMonth(firstDate.getMonth()+1);var last=new Date(firstDate-3600000*24);var lastDay=last.getDate();var weekDay=firstWeek;var myD= document.getElementById(''+(myDay+firstWeek-1));myD.style.background="peru";for (var i=1;i<=lastDay;i++){document.getElementById(''+weekDay).firstElementChild.innerHTML=i;var myEle= document.getElementById(''+weekDay);myEle.style.visibility="visible";weekDay++;}}function table(year,moth){var dateTemp= new Date(year,moth,0);var lastDay = dateTemp.getDate();// dateTemp.setDate(myDay);// myDay= dateTemp.getDate();// console.log(myDay);var myD= document.getElementById(''+myDay);myD.style.background="peru";dateTemp.setDate(1);var firstWeek=dateTemp.getDay();// var flag=0;div1= document.getElementsByClassName('visiti-hid');for (var j=0;j<42;j++){div1[j].style.visibility="hidden";div1[j].style.background = "none";// flag=0;}var weekDay=firstWeek;var myD= document.getElementById(''+(myDay+firstWeek-1));myD.style.background="peru";for (var i=1;i<=lastDay;i++){document.getElementById(''+weekDay).firstElementChild.innerHTML=i;var myEle= document.getElementById(''+weekDay);myEle.style.visibility="visible";weekDay++;// console.log(lastDay);}}function aboveMoth(){myDate.setMonth(myDate.getMonth()-1);moth=myDate.getMonth();year =myDate.getFullYear();document.getElementById('myMoth').innerHTML=myMoth[moth];document.getElementById('myYear').innerHTML=year;mothTemp=moth+1;table(year,mothTemp);// console.log('上一月');// console.log(moth);// console.log(year);}function nextMoth(){myDate.setMonth(myDate.getMonth()+1);moth=myDate.getMonth();year =myDate.getFullYear();document.getElementById('myMoth').innerHTML=myMoth[moth];document.getElementById('myYear').innerHTML=year;mothTemp=moth+1;table(year,mothTemp);// console.log(moth);// console.log('下一月')}// document.getElementById(''+firstWeek).innerHTML = '1';</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
