欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用原生JavaScript實現造日歷輪子實例代碼

 更新時間:2019年05月08日 09:52:26   作者:茉莉灬純潔的白  
這篇文章主要給大家介紹了關于如何利用原生JavaScript實現造日歷輪子的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用JavaScript具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧

前言

在日常開發(fā)中,大多數都是在和框架打交道,久而久之便遺忘了原生JS的感覺,個人感覺中原生JS基礎還是很重要的,所以最近就利用了空余時間造一個輪子出來,雖然以我的水平造出來的輪子質量還是不太可靠的,但是我覺得用來練練手還是不錯的,哈哈!!

So, Let's begin!

github:github.com/Zero-jian/p

以下是日歷的樣子,是有點難看,講究講究,重點在于JS部分,嘻嘻?。?!

關于日歷組件的實現思路

  • 設置默認參數
  • 檢查節(jié)點參數是否傳入,否則拋出錯誤
  • 動態(tài)創(chuàng)建顯示本日星期幾的橫軸
  • 動態(tài)創(chuàng)建日歷的日子
  • 最后添加一點dom動作就好

先來看看構造函數內容

constructor(options) {
    let defaluteOptions = {
      element: null, //這是節(jié)點
      startOfWeek: 1,
      strings: {
        week: n => {
          let map = {
            0: '周日',
            1: '周一',
            2: '周二',
            3: '周三',
            4: '周四',
            5: '周五',
            6: '周六',
          }
          return map[n];
        },
        templateDay: `<li class="currentMonth">
          <span class="dayLabel">
            <span class="day"></span>
            <span class="unit">日</span>
          </span>
        </li>`
      },
      days: {},
    }
    //賦值默認參數
    this.options = Object.assign({}, defaluteOptions, options);
    //輪番就調用函數動態(tài)創(chuàng)建dom
    this.checkOptions()._generateTime()._generateWeekDay()._generateCurrentDay();

初始化創(chuàng)建Calendar類對象的時候設置數值,賦值默認參數以及調用方法來動態(tài)創(chuàng)建dom,相信小伙伴們看懂這段代碼沒壓力。

該輪子我全程都是用ES6寫的,畢竟程序員還是要跟上潮流的?。?br />

賦值參數后開始輪番調用函數,首先調用的是**this.checkOptions()**方法,檢查節(jié)點是否存在

checkOptions() {
    //如果節(jié)點不存在直接拋出錯誤
    if (!this.options.element) {
      throw new Error('element is request');
    }
    return this;
  }

接下來就是獲取當天的年月日

畢竟是日歷,獲取當前的年月日當參考還是很重要的

_generateTime() {
    let data = new Date(); //時間
    let year = this.options.days.year = data.getFullYear(); //年份
    let month = this.options.days.month = data.getMonth() + 1; //月份
    let day = this.options.days.day = data.getDate(); //日子
    this.options.days.countDay = 0; //日歷總日子數為7*6=42
    this.options.days.noMonth = data.getMonth() + 1; //不變的月份
    this.options.days.noYear = data.getFullYear(); //不變的年份
    return this;
  }

創(chuàng)建星期橫軸

  _generateWeekDay() {
    let {
      startOfWeek,
      strings
    } = this.options;
    let calendar = document.querySelector('.calendar');
    let ol = dom.create(`<ol class="weekdays"></ol>`);
    calendar.appendChild(ol);
    let weekIndex = this.createArray(7, startOfWeek).map((day, i) => {
      let li = dom.create(`<li>${strings.week(i)}</li>`);
      //判斷是否為今天
      ol.appendChild(li);
    });
    return this;
  }

dom.create是封裝好的方法,傳入模板即可創(chuàng)建并返回回來

this.createArray()也是封裝好的方法,本函數是創(chuàng)建一個長度為7的數組,為什么長度為7?因為周一到周日的長度為7啊,然后開始使用map映射和遍歷來創(chuàng)建節(jié)點并添加document.body里面!?。?br />

唔唔唔,去到這里,星期橫軸就創(chuàng)建好了,接下來是重點部分了,就是創(chuàng)建對于的星期的日子日歷,其實只要掌握邏輯就好了,不過因為我是菜雞,寫的時候也有點掉坑,所以,哈哈,你們對我寫的代碼參考參考就好了??!

接下來是重點了,就是創(chuàng)建日子

創(chuàng)建日歷日子分為三個部分,第一部分是上個月的日子,第二是本月的日子,第三部分是下個月的日子,三個部分所以把它們分別封裝起來,嫑相互影響??!

話不多說,貼上代碼

  //創(chuàng)建當前月份日子
  _generateCurrentDay() {
    let date = this.options.days;
    let calendar = document.querySelector('.calendar');
    let ol = dom.create(`<ol class="days"></ol>`);
    let getWeek = this._getWeekWeek(date.year, date.month-1, date.day); //星期幾
    let getMonth = this._getMonth(date.year, date.month) //月份天數
    let getMonthDay = this._getWeekDay(); //幾號
    date.countDay = 0;
    date.countDay += getMonth;
    calendar.appendChild(ol);
    //創(chuàng)建當月日子模塊
    let dayIndex = this.createArray(42, this.options.startOfWeek).map((day, i) => {
      let li = dom.create(this.options.strings.templateDay);
      let span = li.querySelector('.dayLabel>.day');
      //判斷日歷起止,對本月日子進行賦值
      if (i >= getWeek && i <= (getMonth + getWeek)) {
        span.textContent = i - getWeek;
      }

      //判斷是否為今天
      if (i == (getMonthDay + getWeek) && date.noMonth == date.month && date.noYear == date.year) {
        li.classList.add('today');
      }
      ol.appendChild(li);
    });
    document.querySelector('h1.date').appendChild(dom.create(`<p data-role="time">${date.year}-${date.month}-${date.day}</p>`));
    this._generatePrevMonth()._generateNextMonth();

  }

創(chuàng)建當前月份日子的邏輯就是首先就是創(chuàng)建一個長度為42的數組,因為6*7=42,數組下標為0至42,然后獲取當月的天數以及當月一號時候是星期幾,通過計算獲取本月天數的下標范圍,然后通過循環(huán)進行賦值,這樣就創(chuàng)建了日歷本月的天數

然后是創(chuàng)建上個月的天數

按照慣例,貼上代碼

_generatePrevMonth() {
    let date = this.options.days;
    let year = date.year;
    let month = date.month;
    let beginWeek = this._getWeekWeek(year,month-1,1);//本月開始星期
    let countMonth = this._getMonth(year,month-1);//上月月份天數
    let li = document.querySelectorAll('.dayLabel>.day');
    beginWeek == 0 ? beginWeek+= 7 : ''; //如果月份開頭為星期日,會出bug,這是防止
    date.countDay += beginWeek;
    this.createArray(beginWeek,this.options.startOfWeek).map((day,i)=>{
      if(i<beginWeek) {
        //上月總天數-本月開始星期幾+1+i
        li[i].textContent = countMonth - beginWeek + 1 + i;
      }
    }); 
    return this;
  }

創(chuàng)建上月的日子,首先獲取本月一號是星期幾,比如是星期三就可以知道前面空的數字分別為星期日、星期一和星期二,上月的天數能占三個位置,所以就創(chuàng)建一個長度為3的數組,然后計算上月的天數,然后通過邏輯判斷進行賦值,就是如此~~~

最后就是下一個月的天數

代碼 代碼 代碼

//創(chuàng)建下個月日子
_generateNextMonth() {
    let date = this.options.days;
    let year = date.year;
    let month = date.month;
    let beginWeek = this._getWeekWeek(year,month,1);//開始星期
    let countMonth = this._getMonth(year,month+1);//下月月份天數
    let li = document.querySelectorAll('.dayLabel>.day');
    //data.countDay統(tǒng)計了上月和本月的日子數總量,直接減去即可
    this.createArray(42-date.countDay , this.options.startOfWeek).map((day,i)=>{
      li[date.countDay+i].textContent = i+1;
    });
  }

這個邏輯比較簡單,就是用(6*7=42)42減去上月天數和本月天數,剩下的位置為顯示下個月的天數,所以就是這樣子!?。?br />

把封裝好的代碼也弄出來吧~~

//dom.create()調用
let dom = {
  create(html) {
    let template = document.createElement('template');
    template.innerHTML = html;
    return template.content.firstChild;
  }
}
  //this.createArray()調用
  //創(chuàng)建數組節(jié)點
  createArray(length, fill) {
    let array = Array.apply(null, {
      length: length
    }).map(() => fill);
    return array;
  }

動作切換部分

切換日子這里相對來說就是比較簡單,我直接貼代碼,你們一看就懂了

   //上一個月
  previousMonth() {
    // this.options.days.month -= 1;
    this.changeMonth('prev');
  }

  //下一個月
  nextMonth() {
    // this.options.days.month += 1;
    this.changeMonth('next');
  }

  //回到今天
  resetMonth() {
    // this._generateTime();
    this.changeMonth('defalut');
  }

  //封裝月份dom
  changeMonth(status) {
    let date = this.options.days;
    switch(status) {
      case 'prev': {
        --date.month < 1 ? date.year-- ? date.month = 12 : '' : '';
        break;
      }

      case 'next': {
        ++date.month > 12 ? date.year++ ? date.month = 1 : '' : '';
        break;
      }

      case 'defalut': {
        this._generateTime();
        break;
      }
    }
    //移除節(jié)點
    this._generateCalendar();
    //重新添加節(jié)點
    this._generateCurrentDay();
  }

唔唔唔,整個日歷組件下來大概就是這樣子,整個流程寫下來感覺自己的思維還是有所進步的,但是其實我覺得這個輪子代碼還是可以再封裝封裝和完善的,嘻嘻~~

輪子功能比較簡單,所以剩下的功能就等待小伙伴們自由發(fā)揮了~~

好了,第一次寫文章,熬夜寫的,突然就有靈感了,不肯睡覺,呵呵,,明天上班肯定是要打瞌睡了,呵呵~~~

本人是小白,從業(yè)將近一年,所以代碼上有什么錯誤,請各位大神能夠指出指出,嗯嗯,完~~

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。

相關文章

  • javascript顯示倒計時控制按鈕的簡單實現

    javascript顯示倒計時控制按鈕的簡單實現

    下面小編就為大家?guī)硪黄猨avascript顯示倒計時控制按鈕的簡單實現。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 輕松實現Bootstrap圖片輪播

    輕松實現Bootstrap圖片輪播

    這篇文章主要介紹了全面解析Bootstrap圖片輪播效果,Bootstrap提供了carousel插件,實現圖片輪播非常方便,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • uniapp微信小程序自定義導航欄的全過程

    uniapp微信小程序自定義導航欄的全過程

    最近一直在學習uni-app開發(fā),由于uniapp是基于vue.js技術開發(fā)的,所以下面這篇文章主要給大家介紹了關于uniapp微信小程序自定義導航欄的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • javascript:文字不間斷向左移動的實例代碼

    javascript:文字不間斷向左移動的實例代碼

    這篇文章介紹了javascript:文字不間斷向左移動的實例代碼,有需要的朋友可以參考一下
    2013-08-08
  • JavaScript實現的XML與JSON互轉功能詳解

    JavaScript實現的XML與JSON互轉功能詳解

    這篇文章主要介紹了JavaScript實現的XML與JSON互轉功能,結合實例形式分析了基于javascript的xml與json相關轉換功能實現技巧,需要的朋友可以參考下
    2017-02-02
  • 圖片完美縮放

    圖片完美縮放

    圖片完美縮放...
    2006-09-09
  • 使用js Math.random()函數生成n到m間的隨機數字

    使用js Math.random()函數生成n到m間的隨機數字

    何使用js生成n到m間的隨機數字,主要目的是為后期的js生成驗證碼做準備,Math.random()函數返回0和1之間的偽隨機數
    2014-10-10
  • js動態(tài)添加刪除,后臺取數據(示例代碼)

    js動態(tài)添加刪除,后臺取數據(示例代碼)

    這篇文章主要是對js動態(tài)添加刪除,后臺取數據(示例代碼)進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • js滑動提示效果代碼分享

    js滑動提示效果代碼分享

    這篇文章主要為大家分享了js滑動提示效果代碼,實現方法簡單,感興趣的小伙伴們可以參考一下
    2016-03-03
  • javascript 自定義常用方法

    javascript 自定義常用方法

    在實際的js開發(fā)過程中,我們常常會有相似或相同的需求。這時候如果沒有很好的封裝(通用功能),代碼的重復將不可避免。
    2009-08-08

最新評論