search

博客列表 >js做的一个日历

js做的一个日历

「flasky」
「flasky」原创
2021年11月23日 18:47:46538浏览

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>
上一条：phpstorm多行快捷操作操作，筛选相似内容下一条：Springboot docker jenkins 自动化部署并上传镜像
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多