原生js实现仿window10系统日历效果的实例


Posted in Javascript onOctober 31, 2017

舞动的灵魂版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实现仿window10系统日历效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 #Javascript
Vue实战之vue登录验证的实现代码
Oct 31 #Javascript
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
ES6解构赋值的功能与用途实例分析
Oct 31 #Javascript
js原生日历的实例(推荐)
Oct 31 #Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 #Javascript
详解RequireJs官方使用教程
Oct 31 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Angular2库初探
2017/03/01 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python实现上传下载文件功能
2020/11/19 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
对numpy中轴与维度的理解
2018/04/18 Python
django的登录注册系统的示例代码
2018/05/14 Python
python爬取个性签名的方法
2018/06/17 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python打开使用的方法
2019/09/30 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
公司股份合作协议书
2014/12/07 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
超市店长竞聘书
2015/09/15 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书