利用JS制作萬年歷的方法

更新時(shí)間：2017年08月16日 16:51:53 作者：LinDaiDai_霖

本篇文章主要介紹了利用JS制作萬年歷的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

我們知道,萬年歷在人們的生活中是在平常不過的一種東西了,那么怎樣用JS來實(shí)現(xiàn)在網(wǎng)頁中展示一個(gè)與眾不同萬年歷呢

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.首先在布局上,可以先用一個(gè)id為calender(日歷)的div將你的萬年歷包住,以便我們對(duì)萬年歷的位置進(jìn)行設(shè)置;

2.在這個(gè)大的div中有三部分: 1. month_year 用以設(shè)置年月; 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代碼分析:

做一些初始化的處理,給倆個(gè)顯示年月的選項(xiàng)卡中添加內(nèi)容便于用戶查找
構(gòu)造一些我們要用到的函數(shù): 如輸入年月計(jì)算出這個(gè)月有幾天,創(chuàng)建添加option及l(fā)i的函數(shù)

<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++){    //初始化倆個(gè)選項(xiàng)卡
      createOption(year,year,yearSelect);
    }
    for(var month=1;month<13;month++){
      createOption(month,month,monthSelect);
    }
    var now = new Date();            //獲取當(dāng)前的日期
    showSelect(now.getFullYear(),now.getMonth()+1);  //引用顯示選項(xiàng)卡的函數(shù)

    showDates();                  //調(diào)用顯示日期的函數(shù)

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: