如何利用JS制作萬年歷

這篇文章主要介紹了如何利用JS制作萬年歷，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們知道,萬年歷在人們的生活中是在平常不過的一種東西了,那么怎樣用JS來實現在網頁中展示一個與眾不同萬年歷呢

1.HTML布局:

<div id="calendar">
  <div id="month_year">
    <select id="year"></select>年
    <select id="month"></select>月
  </div>
  <ul id="title">
    <li>星期日</li>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
  </ul>
  <ul id="datesUl"></ul>
</div>

1.首先在布局上,可以先用一個id為calender(日歷)的div將你的萬年歷包住,以便我們對萬年歷的位置進行設置;

2.在這個大的div中有三部分: 1. month_year 用以設置年月; 2.title 用以顯示星期; 3.detesUl 用以顯示具體的日期;

CSS樣式:

*{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    #calendar{
      width: 700px;
      background-color: lightgray;
      margin: 20px auto;

    }
    #calendar::after{
      content: "";
      display: block;
      clear: both;
    }
    #month_year{
      width: 700px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    ul > li{
      float: left;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
    #datesUl > li:empty{
      opacity: 0;
    }
    #datesUl > li:hover{
      background-color: lightblue;
    }

JS代碼分析:

1. 做一些初始化的處理,給倆個顯示年月的選項卡中添加內容便于用戶查找

2. 構造一些我們要用到的函數: 如輸入年月計算出這個月有幾天,創建添加option及li的函數
   

<script>
  var yearSelect = document.getElementById('year');
  var monthSelect = document.getElementById('month');
  var datesUl = document.getElementById('datesUl');
  //初始化
  function init(){
    for(var year=1990;year<3000;year++){    //初始化倆個選項卡
      createOption(year,year,yearSelect);
    }
    for(var month=1;month<13;month++){
      createOption(month,month,monthSelect);
    }
    var now = new Date();            //獲取當前的日期
    showSelect(now.getFullYear(),now.getMonth()+1);  //引用顯示選項卡的函數

    showDates();                  //調用顯示日期的函數

    yearSelect.onchange=function(){         //當選項卡改變時
      showDates();
    };
    monthSelect.onchange=function(){
      showDates();
    }
  }
  init();            //調用初始化函數   
  //創建option的函數
  function createOption(text,value,parent){
    var option = document.createElement('option');
    option.innerHTML = text;
    option.value = value;
    parent.appendChild(option);
  }
  //獲取當前的日期并顯示在選項卡中
  function showSelect(year,month){
    yearSelect.value = year;
    monthSelect.value = month;
  }
  //獲取選擇的年月的第一天是星期幾
  function getDays(year,month){
    var d = new Date(year,month,1);
    return d.getDay();
  }
  //根當前的select中的年和月來顯示日期
  function showDates(){
    datesUl.innerHTML= "";
    var year = yearSelect.value;
    var month = monthSelect.value;
    //創建空的li
    for(var i=0;i<getDays(year,month);i++){
      createLi("",datesUl);
    }
    //創建有日期的li
    for(var j=1;j<=getDatesOfMonth(year,month);j++){
      createLi(j,datesUl);
    }
  }
  //創建li并添加至對應的容器
  function createLi(text,parent){
    var li = document.createElement('li');
    li.innerHTML = text;
    parent.appendChild(li);
  }
  //創建一個輸入年月計算出這個月有幾天的函數
  function getDatesOfMonth(year,month){
    var d = new Date(year,month,0);
    return d.getDate();
  }
</script>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何利用JS制作萬年歷”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!