收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

原生js實現仿window10系統日歷效果的實例

舞動的靈魂版js日歷,完全采用js實現,故而實現了與語言無關,jsp、asp.net php asp均可使用.無論你是開發軟件,還是網站,均是不可或缺的實用代碼。

該日歷主要實現了獲取當前時間時分秒,年月日星期,動態生成選擇年的select,月的select,然后根據你所選中的年月,顯示該年月對應的這一個月的日期。

點擊上一個月,下一個月按鈕,在下拉列表中顯示對應的年月。

 <!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('text1');

   text1.onfocus = function() {
    calendar();
   }

//   calendar();

   function calendar() {

    var calendarElement = document.getElementById('calendar');
    var todayTimeElement = document.getElementById('todayTime');
    var todayDateElement = document.getElementById('todayDate');
    var selectYearElement = document.getElementById('selectYear');
    var selectMonthElement = document.getElementById('selectMonth');
    var showTableElement = document.getElementById('showTable');
    var prevMonthElement = document.getElementById('prevMonth');
    var nextMonthElement = document.getElementById('nextMonth');

    calendarElement.style.display = 'block';

    /*
     * 獲取今天的時間
     * */
    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('option');
     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('option');
     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 = '';
     //根據當前需要顯示的年和月來創建日歷
     //創建一個要顯示的年月的下一個的日期對象
     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('tr');

      //列的循環
      for ( var j=0; j<cells; j++ ) {

       var td = document.createElement('td');

       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 = 'today';
        }

        td.innerHTML = v;
       } else {
        td.innerHTML = '';
       }

       td.ondblclick = function() {
        calendarElement.style.display = 'none';

        text1.value = showYear + '年' + (showMonth+1) + '月' + this.innerHTML + '日';
       }

       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('option');
     for (var i=0; i<options.length; i++) {
      if ( options[i].value == sy ) {
       options[i].selected = true;
      }
     }

     var options = selectMonthElement.getElementsByTagName('option');
     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(':');
   }

   /*
   * 獲取指定時間的年月日和星期
   * */
   function getDate(d) {
    return d.getFullYear() + '年'+ addZero(d.getMonth() + 1) +'月'+ addZero(d.getDate()) +'日 星期' + getWeek(d.getDay());
   }

   /*
   * 給數字加前導0
   * */
   function addZero(v) {
    if ( v < 10 ) {
     return '0' + v;
    } else {
     return '' + v;
    }
   }

   /*
   * 把數字星期轉換成漢字星期
   * */
   function getWeek(n) {
    return '日一二三四五六'.split('')[n];
   }

  }
 </script>
</head>
<body>

<input type="text" id="text1">

 <div id="calendar">

  <div id="todayTime"></div>
  <div id="todayDate"></div>

  <div id="tools">
   <div class="l">
    <select id="selectYear"></select> 年
    <select id="selectMonth"></select> 月
   </div>
   <div class="r">
    <span id="prevMonth">∧</span>
    <span id="nextMonth">∨</span>
   </div>
  </div>

  <table id="showTable">
   <thead>
    <tr>
     <th>日</th>
     <th>一</th>
     <th>二</th>
     <th>三</th>
     <th>四</th>
     <th>五</th>
     <th>六</th>
    </tr>
   </thead>
   <tbody></tbody>
  </table>

 </div>

</body>
</html>

效果:

查看圖片

以上這篇原生js實現仿window10系統日歷效果的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持積木網。

JS簡單實現點擊跳轉登陸郵箱功能的方法
本文實例講述了JS簡單實現點擊跳轉登陸郵箱功能的方法。分享給大家供大家參考,具體如下:前言注冊的過程中往往需要填寫郵箱,并登陸郵箱進行驗

javascript高級模塊化require.js的具體使用方法
本文介紹了require.js的具體使用方法,分享給大家,也給自己留個筆記。Require.js:RequireJS是一個非常小巧的javascript模塊載入框架,是AMD(AsynchronousModuleDe

React Native使用Modal自定義分享界面的示例代碼
在很多App中都會涉及到分享,ReactNative提供了Modal組件用來實現一些模態彈窗,例如加載進度框,分享彈框等。使用Modal搭建分析的效果如下:自定義的

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 青海快3昨天开奖号 12022排列3梅春预测 海南橡胶股票 山东福彩群英会开奖 常山纺织股票 湖北今天快三开奖结果走势图 云南时时彩五星通选中一个多少钱 上海股票期货配资 广西快乐十分开奖现场 云南快乐十10分 海南体彩飞鱼 2020七星彩走势图 山西快乐十分前三组选遗漏开奖走势 五粮液股票行情今天 投资理财app 河南福彩快三开奖预测