首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

待繁华落尽

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 中介者模式实例
Dec 16 Javascript
通过js动态操作table(新增，删除相关列信息)
May 23 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
Bootstrap项目实战之首页内容介绍（全）
Apr 25 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 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
RTMP(1) text-shadow(1) TypeScript(2) http_stub_status_module(1) 双向链表(6) 区块链(2) keeplive_timeout(1) zabbix(9) NumPy(2) location(2)
You might like
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python中partial()基础用法说明
2018/12/30 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
python和js交互调用的方法
2020/06/23 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
Glamest意大利：女性在线奢侈品零售店
2019/04/28 全球购物
美国渔具店：FishUSA
2019/08/07 全球购物
团日活动总结模板
2014/06/25 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书