Maison > Article > interface Web > js pour obtenir un effet de calendrier du système de fenêtre d'imitation

js pour obtenir un effet de calendrier du système de fenêtre d'imitation

php中世界最好的语言original: 2017-12-30 18:00:091794parcourir

Ce que je vous propose cette fois, c'est d'implémenter l'effet de calendrier du système d'imitation de fenêtre dans JS. Il s'agit d'un code entièrement écrit en JS d'origine. Bien qu'il ne nécessite pas de plug-ins et que la quantité de code soit un peu plus importante, c'est toujours une grande valeur de référence, je vais vous donner une bonne analyse aujourd'hui.

Le calendrier met principalement en œuvre l'obtention de l'heure actuelle, de l'heure, des minutes, des secondes, de l'année, du mois, du jour et de la semaine, génère dynamiquement une sélection d'année et de mois, puis affiche celle correspondant à l'année et au mois en fonction à l'année et au mois que vous avez sélectionnés. La date du mois.

Cliquez sur les boutons du mois précédent et du mois suivant pour afficher l'année et le mois correspondants dans la liste déroulante .

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #calendar {
   position: absolute;
   padding: 5px;
   border: 1px solid #000000;
   background: #8f3349;
   display: none;
  }
  
  #todayTime {
   padding: 5px 0;
   font-size: 40px;
   color: white;
  }
  #todayDate {
   padding: 5px 0;
   font-size: 24px;
   color: #ffcf88;
  }
  #tools {
   padding: 5px 0;
   height: 30px;
   color: white;
  }
  #tools .l {
   float: left;
  }
  #tools .r {
   float: right;
  }
  table {
   width: 100%;
   color: white;
  }
  table th {
   color: #a2cbf3;
  }
  table td {
   text-align: center;
   cursor: default;
  }
  table td.today {
   background: #cc2951;
   color: white;
  }
 </style>
 <script>
  window.onload = function() {
  
   var text1 = document.getElementById(&#39;text1&#39;);
  
   text1.onfocus = function() {
    calendar();
   }
  
//   calendar();
  
   function calendar() {
  
    var calendarElement = document.getElementById(&#39;calendar&#39;);
    var todayTimeElement = document.getElementById(&#39;todayTime&#39;);
    var todayDateElement = document.getElementById(&#39;todayDate&#39;);
    var selectYearElement = document.getElementById(&#39;selectYear&#39;);
    var selectMonthElement = document.getElementById(&#39;selectMonth&#39;);
    var showTableElement = document.getElementById(&#39;showTable&#39;);
    var prevMonthElement = document.getElementById(&#39;prevMonth&#39;);
    var nextMonthElement = document.getElementById(&#39;nextMonth&#39;);
  
    calendarElement.style.display = &#39;block&#39;;
  
    /*
     * 获取今天的时间
     * */
    var today = new Date();
  
    //设置日历显示的年月
    var showYear = today.getFullYear();
    var showMonth = today.getMonth();
  
     //持续更新当前时间
    updateTime();
  
    //显示当前的年月日星期
    todayDateElement.innerHTML = getDate(today);
  
    //动态生成选择年的select
    for (var i=1970; i<2020; i++) {
     var option = document.createElement(&#39;option&#39;);
     option.value = i;
     option.innerHTML = i;
     if ( i == showYear ) {
      option.selected = true;
     }
     selectYearElement.appendChild(option);
    }
    //动态生成选择月的select
    for (var i=1; i<13; i++) {
     var option = document.createElement(&#39;option&#39;);
     option.value = i - 1;
     option.innerHTML = i;
     if ( i == showMonth + 1 ) {
      option.selected = true;
     }
     selectMonthElement.appendChild(option);
    }
  
    //初始化显示table
    showTable();
  
    //选择年
    selectYearElement.onchange = function() {
     showYear = this.value;
     showTable();
     showOption();
    }
  
    //选择月
    selectMonthElement.onchange = function() {
     showMonth = Number(this.value);
     showTable();
     showOption();
    }
  
    //上一个月
    prevMonthElement.onclick = function() {
     showMonth--;
     showTable();
     showOption();
    }
  
    //下一个月
    nextMonthElement.onclick = function() {
     showMonth++;
     showTable();
     showOption();
    }
  
  
    /*
    * 实时更新当前时间
    * */
    function updateTime() {
     var timer = null;
     //每个500毫秒获取当前的时间，并把当前的时间格式化显示到指定位置
     var today = new Date();
     todayTimeElement.innerHTML = getTime(today);
     timer = setInterval(function() {
      var today = new Date();
      todayTimeElement.innerHTML = getTime(today);
     }, 500);
    }
  
    function showTable() {
     showTableElement.tBodies[0].innerHTML = &#39;&#39;;
     //根据当前需要显示的年和月来创建日历
     //创建一个要显示的年月的下一个的日期对象
     var date1 = new Date(showYear, showMonth+1, 1, 0, 0, 0);
     //对下一个月的1号0时0分0秒的时间 - 1得到要显示的年月的最后一天的时间
     var date2 = new Date(date1.getTime() - 1);
     //得到要显示的年月的总天数
     var showMonthDays = date2.getDate();
     //获取要显示的年月的1日的星期,从0开始的星期
     date2.setDate(1);
     //showMonthWeek表示这个月的1日的星期，也可以作为表格中前面空白的单元格的个数
     var showMonthWeek = date2.getDay();
  
     var cells = 7;
     var rows = Math.ceil( (showMonthDays + showMonthWeek) / cells );
  
     //通过上面计算出来的行和列生成表格
     //没生成一行就生成7列
     //行的循环
     for ( var i=0; i<rows; i++ ) {
  
      var tr = document.createElement(&#39;tr&#39;);
  
      //列的循环
      for ( var j=0; j<cells; j++ ) {
  
       var td = document.createElement(&#39;td&#39;);
  
       var v = i*cells + j - ( showMonthWeek - 1 );
  
       //根据这个月的日期控制显示的数字
       //td.innerHTML = v;
       if ( v > 0 && v <= showMonthDays ) {
  
        //高亮显示今天的日期
        if ( today.getFullYear() == showYear && today.getMonth() == showMonth && today.getDate() == v ) {
         td.className = &#39;today&#39;;
        }
  
        td.innerHTML = v;
       } else {
        td.innerHTML = &#39;&#39;;
       }
  
       td.ondblclick = function() {
        calendarElement.style.display = &#39;none&#39;;
  
        text1.value = showYear + &#39;年&#39; + (showMonth+1) + &#39;月&#39; + this.innerHTML + &#39;日&#39;;
       }
  
       tr.appendChild(td);
  
      }
  
      showTableElement.tBodies[0].appendChild(tr);
  
     }
    }
  
    function showOption() {
  
     var date = new Date(showYear, showMonth);
     var sy = date.getFullYear();
     var sm = date.getMonth();
     console.log(showYear, showMonth)
  
     var options = selectYearElement.getElementsByTagName(&#39;option&#39;);
     for (var i=0; i<options.length; i++) {
      if ( options[i].value == sy ) {
       options[i].selected = true;
      }
     }
  
     var options = selectMonthElement.getElementsByTagName(&#39;option&#39;);
     for (var i=0; i<options.length; i++) {
      if ( options[i].value == sm ) {
       options[i].selected = true;
      }
     }
    }
   }
  
   /*
    * 获取指定时间的时分秒
    * */
   function getTime(d) {
    return [
     addZero(d.getHours()),
     addZero(d.getMinutes()),
     addZero(d.getSeconds())
    ].join(&#39;:&#39;);
   }
  
   /*
   * 获取指定时间的年月日和星期
   * */
   function getDate(d) {
    return d.getFullYear() + &#39;年&#39;+ addZero(d.getMonth() + 1) +&#39;月&#39;+ addZero(d.getDate()) +&#39;日 星期&#39; + getWeek(d.getDay());
   }
  
   /*
   * 给数字加前导0
   * */
   function addZero(v) {
    if ( v < 10 ) {
     return &#39;0&#39; + v;
    } else {
     return &#39;&#39; + v;
    }
   }
  
   /*
   * 把数字星期转换成汉字星期
   * */
   function getWeek(n) {
    return &#39;日一二三四五六&#39;.split(&#39;&#39;)[n];
   }
  
  }
 </script>
</head>
<body>
  
<input type="text" id="text1">
  
 <p id="calendar">
  
  <p id="todayTime"></p>
  <p id="todayDate"></p>
  
  <p id="tools">
   <p class="l">
    <select id="selectYear"></select> 年
    <select id="selectMonth"></select> 月
   </p>
   <p class="r">
    <span id="prevMonth">∧</span>
    <span id="nextMonth">∨</span>
   </p>
  </p>
  
  <table id="showTable">
   <thead>
    <tr>
     <th>日</th>
     <th>一</th>
     <th>二</th>
     <th>三</th>
     <th>四</th>
     <th>五</th>
     <th>六</th>
    </tr>
   </thead>
   <tbody></tbody>
  </table>
  
 </p>
  
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Étapes pour implémenter l'optimisation du cache PHP à l'aide de memcached et xcache

Que diriez-vous des événements bouillonnants JS Comment implémenter AJAX et JSONP en utilisant

JS natif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la directive personnalisée de Vue pour compléter un menu déroulantArticle suivant：Comment utiliser la directive personnalisée de Vue pour compléter un menu déroulant

Articles Liés

Voir plus