利用原生JavaScript實現造日歷輪子實例代碼-創(chuàng)新互聯

前言

創(chuàng)新互聯長期為上1000家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態(tài)環(huán)境。為澄江企業(yè)提供專業(yè)的網站制作、成都網站制作，澄江網站改版等技術服務。擁有10年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

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

So, Let's begin!

github：github.com/Zero-jian/p…

以下是日歷的樣子，是有點難看，講究講究，重點在于JS部分，嘻嘻?。。?/p>

關于日歷組件的實現思路

  • 設置默認參數
  • 檢查節(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();

名稱欄目：利用原生JavaScript實現造日歷輪子實例代碼-創(chuàng)新互聯
網站網址：http://bm7419.com/article16/dcoidg.html

成都網站建設公司_創(chuàng)新互聯，為您提供電子商務、網站策劃、App開發(fā)、響應式網站、網站設計、定制開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

成都網站建設公司