Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js做的一个日历
Blogger Information
Blog 14
fans 0
comment 0
visits 8038
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js做的一个日历
「flasky」
Original
539 people have browsed it

js做的一个日历

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>日历</title>
  6.     <style>
  8.         section {
  9.             margin: 60px auto;
  10.             width: 300px;
  11.             height: 300px;
  12.             border: 1px solid black;
  13.             /*padding: 10px;*/
  14.             font-size: 16px;
  15.         }
  17.         .padding-1{
  18.             padding: 3px;
  19.         }
  21.         .padding-2{
  22.             padding: 10px;
  23.         }
  24.         .d-flex {
  25.             display: flex;
  26.         }
  28.         .just-betww {
  29.             justify-content: space-between;
  30.         }
  31.         .just-round {
  32.             justify-content: space-around;
  33.         }
  34.         .align-items-centen {
  35.             align-items: center;
  36.         }
  38.         .text-center {
  39.             text-align: center;
  40.         }
  42.         .background-ccc {
  43.             background: #cccccc;
  44.         }
  46.         .border-1{
  47.             border: 1px solid black;
  48.         }
  50.         .curos {
  51.             cursor:pointer ;
  52.         }
  54.         .mix{
  55.             width: 26px;
  56.             height: 26px;
  57.             margin: 5px 4px 4px 7px;
  58.             border: 1px solid rgba(255,0,0,0);
  59.         }
  60.         .mix:hover{
  61.             border: 1px solid red;
  62.         }
  63.         .flex-wrap {
  64.             flex-wrap: wrap;
  65.         }
  67.         .visiti-hid{
  68.             visibility: hidden;
  69.         }
  70.         .visiti-vi{
  71.             visibility: visible;
  72.         }
  73.         .dis-none {
  74.             display: none;
  75.         }
  77.         .day-bg{
  78.             background: peru;
  79.         }
  81.     </style>
  82. </head>
  83. <body>
  84.     <section>
  85.         <div class="d-flex just-betww padding-1">
  86.             <div class="curos" onclick=aboveMoth()>上一月</div>
  87.             <div><span id="myYear">2021</span></div>
  88.             <div class="curos" onclick=nextMoth()>下一月</div>
  89.         </div>
  90.         <div class="text-center"><span id="myMoth">九月</span></div>
  91.         <div class="background-ccc text-center d-flex just-round">
  92.             <span>日</span>
  93.             <span>一</span>
  94.             <span>二</span>
  95.             <span>三</span>
  96.             <span>四</span>
  97.             <span>五</span>
  98.             <span>六</span>
  99.         </div>
  100.         <div class="padding-1 d-flex  flex-wrap just-round text-center">
  103.             <div class="mix visiti-hid curos" id="0"><span></span></div>
  104.             <div class="mix visiti-hid curos" id="1"><span></span></div>
  105.             <div class="mix visiti-hid curos" id="2"><span></span></div>
  106.             <div class="mix visiti-hid curos" id="3"><span></span></div>
  107.             <div class="mix visiti-hid curos" id="4"><span></span></div>
  108.             <div class="mix visiti-hid curos" id="5"><span></span></div>
  109.             <div class="mix visiti-hid curos" id="6"><span></span></div>
  110.             <div class="mix visiti-hid curos" id="7"><span></span></div>
  111.             <div class="mix visiti-hid curos" id="8"><span></span></div>
  112.             <div class="mix visiti-hid curos" id="9"><span></span></div>
  113.             <div class="mix visiti-hid curos" id="10"><span></span></div>
  114.             <div class="mix visiti-hid curos" id="11"><span></span></div>
  115.             <div class="mix visiti-hid curos" id="12"><span></span></div>
  116.             <div class="mix visiti-hid curos" id="13"><span></span></div>
  117.             <div class="mix visiti-hid curos" id="14"><span></span></div>
  118.             <div class="mix visiti-hid curos" id="15"><span></span></div>
  119.             <div class="mix visiti-hid curos" id="16"><span></span></div>
  120.             <div class="mix visiti-hid curos" id="17"><span></span></div>
  121.             <div class="mix visiti-hid curos" id="18"><span></span></div>
  122.             <div class="mix visiti-hid curos" id="19"><span></span></div>
  123.             <div class="mix visiti-hid curos" id="20"><span></span></div>
  124.             <div class="mix visiti-hid curos" id="21"><span></span></div>
  125.             <div class="mix visiti-hid curos" id="22"><span></span></div>
  126.             <div class="mix visiti-hid curos" id="23"><span></span></div>
  127.             <div class="mix visiti-hid curos" id="24"><span></span></div>
  128.             <div class="mix visiti-hid curos" id="25"><span></span></div>
  129.             <div class="mix visiti-hid curos" id="26"><span></span></div>
  130.             <div class="mix visiti-hid curos" id="27"><span></span></div>
  131.             <div class="mix visiti-hid curos" id="28"><span></span></div>
  132.             <div class="mix visiti-hid curos" id="29"><span></span></div>
  133.             <div class="mix visiti-hid curos" id="30"><span></span></div>
  134.             <div class="mix visiti-hid curos" id="31"><span></span></div>
  135.             <div class="mix visiti-hid curos" id="32"><span></span></div>
  136.             <div class="mix visiti-hid curos" id="33"><span></span></div>
  137.             <div class="mix visiti-hid curos" id="34"><span></span></div>
  138.             <div class="mix visiti-hid curos" id="35"><span></span></div>
  139.             <div class="mix visiti-hid curos" id="36"><span></span></div>
  140.             <div class="mix visiti-hid curos" id="37"><span></span></div>
  141.             <div class="mix visiti-hid curos" id="38"><span></span></div>
  142.             <div class="mix visiti-hid curos" id="39"><span></span></div>
  143.             <div class="mix visiti-hid curos" id="40"><span></span></div>
  144.             <div class="mix visiti-hid curos" id="41"><span></span></div>
  145.         </div>
  146.     </section>
  148.     <script>
  149.         var myMoth=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
  151.         var myDate = new Date();
  152.         var year =myDate.getFullYear();
  153.         var moth = myDate.getMonth();
  154.         var myDay = myDate.getDate();
  155.         // console.log(myDay);
  156.         // console.log(moth);
  158.         giveFirst();
  161.         function giveFirst(){
  162.             var firstDate = new Date();
  163.             var year =firstDate.getFullYear();
  164.             var moth = firstDate.getMonth();
  165.             // console.log(firstDate);
  167.             document.getElementById('myYear').innerHTML=year;
  168.             document.getElementById('myMoth').innerHTML=myMoth[moth];
  170.             firstDate.setDate(1);
  171.             var firstWeek=firstDate.getDay();
  173.             firstDate.setMonth(firstDate.getMonth()+1);
  175.             var last=new Date(firstDate-3600000*24);
  176.             var lastDay=last.getDate();
  177.             var weekDay=firstWeek;
  179.             var myD= document.getElementById(''+(myDay+firstWeek-1));
  180.             myD.style.background="peru";
  182.             for (var i=1;i<=lastDay;i++){
  183.                 document.getElementById(''+weekDay).firstElementChild.innerHTML=i;
  184.                 var myEle= document.getElementById(''+weekDay);
  185.                 myEle.style.visibility="visible";
  186.                 weekDay++;
  187.             }
  188.         }
  191.         function table(year,moth){
  194.             var dateTemp= new Date(year,moth,0);
  195.             var lastDay = dateTemp.getDate();
  197.             // dateTemp.setDate(myDay);
  198.             // myDay= dateTemp.getDate();
  201.             // console.log(myDay);
  202.             var myD= document.getElementById(''+myDay);
  203.             myD.style.background="peru";
  205.                  dateTemp.setDate(1);
  206.             var firstWeek=dateTemp.getDay();
  208.             // var flag=0;
  210.             div1= document.getElementsByClassName('visiti-hid');
  212.             for (var j=0;j<42;j++)
  213.             {
  214.                 div1[j].style.visibility="hidden";
  215.                 div1[j].style.background = "none";
  216.                 // flag=0;
  217.             }
  219.             var weekDay=firstWeek;
  220.             var myD= document.getElementById(''+(myDay+firstWeek-1));
  221.             myD.style.background="peru";
  223.             for (var i=1;i<=lastDay;i++){
  224.                 document.getElementById(''+weekDay).firstElementChild.innerHTML=i;
  225.                 var myEle= document.getElementById(''+weekDay);
  226.                 myEle.style.visibility="visible";
  227.                 weekDay++;
  228.                 // console.log(lastDay);
  229.             }
  233.         }
  237.         function aboveMoth()
  238.         {
  239.             myDate.setMonth(myDate.getMonth()-1);
  240.             moth=myDate.getMonth();
  241.             year =myDate.getFullYear();
  242.             document.getElementById('myMoth').innerHTML=myMoth[moth];
  243.             document.getElementById('myYear').innerHTML=year;
  244.             mothTemp=moth+1;
  246.             table(year,mothTemp);
  249.             // console.log('上一月');
  250.             // console.log(moth);
  251.             // console.log(year);
  253.         }
  256.         function nextMoth()
  257.         {
  258.             myDate.setMonth(myDate.getMonth()+1);
  259.             moth=myDate.getMonth();
  260.             year =myDate.getFullYear();
  262.             document.getElementById('myMoth').innerHTML=myMoth[moth];
  263.             document.getElementById('myYear').innerHTML=year;
  264.             mothTemp=moth+1;
  266.             table(year,mothTemp);
  267.             // console.log(moth);
  268.             // console.log('下一月')
  269.         }
  274.         // document.getElementById(''+firstWeek).innerHTML = '1';
  276.     </script>
  278. </body>
  279. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post