ASCII码 ASCII码

js对象、函数、日期对象----简易日历

发布于：2022-05-20 18:41:07  栏目：技术文档

虽然搞了很久，出来后成就感杠杠的~

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>日历</title>
  6.     <style>
  7.         body{
  8.             font-size: 12px;
  9.         }
  10.         .main{
  11.             width: 520px;
  12.             margin: 0 auto;
  13.             margin-top: 50px;
  14.             border: 1px solid #CCC;
  15.             display: flex;
  16.             flex-direction: column;
  17.             justify-content: flex-start;
  18.             align-items: center;
  19.             color: #333;
  20.             padding: 5px 0;
  21.             box-sizing: border-box;
  22.             border-radius: 5px;
  23.         }
  24.         a{
  25.             text-decoration: none;
  26.             color: #333;
  27.         }
  28.         a:hover{
  29.             text-decoration: underline;
  30.         }
  31.         div{
  32.             text-align: center;
  33.         }
  34.         .main div.date-box{
  35.             width: 100%;
  36.         }
  37.         .main .yeah-box{
  38.             display: flex;
  39.             justify-content: space-between;
  40.             align-items: center;
  41.         }
  42.         .main .yeah-box div{
  43.             height: 40px;
  44.             line-height: 40px;
  46.         }
  47.         .main .yeah-box div.yeah{
  48.             flex-grow: 1;
  49.             font-size: 14px;
  50.         }
  51.         .main .yeah-box div:not(.yeah){
  52.             padding: 0 10px;
  53.         }
  54.         .main .cur-time{
  55.             font-size: 16px;
  56.             height: 40px;
  57.             line-height: 40px;
  58.             font-weight: bold;
  59.         }
  60.         .main .date-line{
  61.             display: flex;
  62.             justify-content: flex-start;
  63.             flex-wrap: wrap;
  64.             list-style: none;
  65.             padding: 0;
  66.             margin: 0;
  67.             width: 97.5%;
  68.             padding-left: 2.5%;
  69.         }
  70.         .main .week-line{
  71.             margin-bottom: 10px;
  72.         }
  73.         .main .date-line li{
  74.             list-style: none;
  75.             padding: 0;
  76.             width: 70px;
  77.             text-align: center;
  78.             height: 35px;
  79.             line-height: 35px;
  80.         }
  81.         .main .date-line:not(.week-line) li{
  82.             cursor: pointer;
  83.             margin-bottom: 5px;
  84.         }
  86.         .main .date-line:not(.week-line) li:not(.disable):hover{
  87.             background-color: #666;
  88.             color: #FFF;
  89.             border-radius: 5px;
  90.         }
  91.         .main .date-line:not(.week-line) li.active{
  92.             background-color: #666;
  93.             color: #FFF;
  94.             border-radius: 5px;
  95.         }
  97.         .main .date-line li.disable{
  98.             cursor: default;
  99.             color: #DDD;
  100.         }
  101.         .cur-time-btn{
  102.             display: block;
  103.             background-color: #666;
  104.             width: 20%;
  105.             margin: 0 auto;
  106.             padding: 7px 0;
  107.             color: #FFF;
  108.             border-radius:5px;
  109.             margin-bottom: 10px;
  110.         }
  111.     </style>
  113.     <script>
  114.         function getFmtNun(num) {
  115.             num = num.toString();
  116.             return num.length == 1 ? '0' + num : num;
  117.         }
  119.         function getWeekStr(week) {
  120.             var strs = ['日', '一', '二', '三', '四', '五', '六'];
  121.             return strs[week];
  122.         }
  124.         function getDate(date = '') {
  125.             if(date == '') {
  126.                 var myDate = new Date();
  127.             } else {
  128.                 var myDate = new Date(date);
  129.             }
  131.             this.year = myDate.getFullYear();
  132.             this.month = myDate.getMonth() + 1;
  133.             this.monthStr = getFmtNun(this.month);
  134.             this.day = myDate.getDate();
  135.             this.dayStr = getFmtNun(this.day);
  136.             this.week = myDate.getDay();
  137.             this.weekStr = getWeekStr(this.week);
  138.             this.hour = myDate.getHours();
  139.             this.hourStr = getFmtNun(this.hour);
  140.             this.minute = myDate.getMinutes();
  141.             this.minuteStr = getFmtNun(this.minute);
  142.             this.second = myDate.getSeconds();
  143.             this.secondStr = getFmtNun(this.second);
  145.             return this;
  147.         }
  149.         var actualCmd;
  150.         function dateRender(date = '') {
  151.             window.clearTimeout(actualCmd);
  152.             this.o = new getDate(date);
  154.             this.render = function() {
  155.                 var curYear = this.o.year;
  156.                 var curMonth = this.o.month;
  157.                 var curDay = this.o.day;
  158.                 var curDate = curYear + '-' + curMonth + '-' + curDay;
  160.                 document.getElementById('yeah').innerHTML = curYear + '年';
  161.                 document.getElementById('date').innerHTML = this.o.monthStr + '月' + this.o.dayStr + '日 周' + this.o.weekStr;
  162.                 document.getElementById('time').innerHTML = this.o.hourStr + ':' + this.o.minuteStr + ':' + this.o.secondStr;
  164.                 //单天选择
  165.                 var fullDates = this.getFullDays();
  166.                 var html = '';
  167.                 for(var key in fullDates) {
  168.                     var click = fullDates[key].type == 'prev' ? '' : 'getDayActualDate(\'' + fullDates[key].date + '\');';
  169.                     var tab = '<li onclick="' + click + '" class="' + (fullDates[key].date == curDate ? 'active' : '') + ' ' + (fullDates[key].type == 'prev' ? 'disable' : '') + '" data-date="' + fullDates[key].date + '">' + fullDates[key].day + '</li>';
  170.                     html += tab;
  171.                 }
  172.                 document.getElementById('dateBox').innerHTML = html;
  174.                 var curHour = this.o.hour;
  175.                 var curMinute = this.o.minute;
  176.                 var curSecond = this.o.second;
  177.                 var curTime = curHour + ':' + curMinute + ':' + curSecond;
  179.                 //上月
  180.                 var prevMonthDate = this.getPrevMonthDate();
  181.                 prevMonthDate += ' ' + curTime;
  182.                 document.getElementById('prevMonth').setAttribute('onclick', 'dateAction("' + prevMonthDate + '");');
  184.                 //下月
  185.                 var nextMonthDate = this.getNextMonthDate();
  186.                 nextMonthDate += ' ' + curTime;
  187.                 document.getElementById('nextMonth').setAttribute('onclick', 'dateAction("' + nextMonthDate + '");');
  189.                 //上年
  190.                 var prevYearDate = this.getPrevYearDate();
  191.                 prevYearDate += ' ' + curTime;
  192.                 document.getElementById('prevYear').setAttribute('onclick', 'dateAction("' + prevYearDate + '");');
  194.                 //下年
  195.                 var nextYearDate = this.getNextYearDate();
  196.                 nextYearDate += ' ' + curTime;
  197.                 document.getElementById('nextYear').setAttribute('onclick', 'dateAction("' + nextYearDate + '");');
  199.                 //实时时间
  200.                 var curFullDate = this.o.year + '-' + this.o.month + '-' + this.o.day + ' ' + this.o.hour + ':' + this.o.minute + ':' + this.o.second;
  201.                 showActualDate(curDate, curFullDate);
  203.             }
  205.             //下年日期
  206.             this.getNextYearDate = function() {
  207.                 var nextYear = this.o.year + 1;
  208.                 var nextYearDate = nextYear + '-' + this.o.month;
  209.                 var nextObj = new dateRender(nextYearDate + '-1');
  210.                 var nextYearMonthLastDay = nextObj.getMonthLastDay();
  211.                 nextYearMonthLastDay = parseInt(nextYearMonthLastDay.day);
  212.                 var nextYearCurDay = this.o.day > nextYearMonthLastDay ? nextYearMonthLastDay : this.o.day;
  213.                 return nextYearDate + '-' + nextYearCurDay;
  214.             }
  216.             //上年日期
  217.             this.getPrevYearDate = function() {
  218.                 var prevYear = this.o.year - 1;
  219.                 var prevYearDate = prevYear + '-' + this.o.month;
  220.                 var prevObj = new dateRender(prevYearDate + '-1');
  221.                 var prevYearMonthLastDay = prevObj.getMonthLastDay();
  222.                 prevYearMonthLastDay = parseInt(prevYearMonthLastDay.day);
  223.                 var prevYearCurDay = this.o.day > prevYearMonthLastDay ? prevYearMonthLastDay : this.o.day;
  224.                 return prevYearDate + '-' + prevYearCurDay;
  225.             }
  227.             //上月日期
  228.             this.getPrevMonthDate = function() {
  229.                 var prevMothDay = this.getPrevMonthDay();
  230.                 var prevDate = prevMothDay.date.split('-');
  231.                 var prevDay = parseInt(prevDate[2]);
  232.                 prevDay = this.o.day > prevDay ? prevDay : this.o.day;
  233.                 prevDate[2] = prevDay;
  234.                 return prevDate.join('-');
  235.             }
  237.             //下月日期
  238.             this.getNextMonthDate = function() {
  239.                 var nextMonthDate = this.getNextMonthDay();
  240.                 nextMonthDate = nextMonthDate.split('-');
  241.                 var nextMonthlastDay = parseInt(nextMonthDate[2]);
  242.                 nextMonthlastDay = this.o.day > nextMonthlastDay ? nextMonthlastDay : this.o.day;
  243.                 nextMonthDate[2] = nextMonthlastDay;
  244.                 return nextMonthDate.join('-');
  245.             }
  247.             //本月第一次是周几
  248.             this.getMonthFirstWeek = function() {
  249.                 var firstDate = this.o.year + '-' + this.o.month + '-1';
  250.                 var forstObj = new Date(firstDate);
  252.                 return {
  253.                     date: firstDate,
  254.                     week: forstObj.getDay()
  255.                 };
  256.             }
  258.             //当月最后一天
  259.             this.getMonthLastDay = function() {
  260.                 if(this.o.month == 12) {
  261.                     var year = this.o.year + 1;
  262.                     var month = 1;
  263.                 } else {
  264.                     var year = this.o.year;
  265.                     var month = this.o.month + 1;
  266.                 }
  267.                 var nextData = year + '-' + month + '-1';
  268.                 var dateObj = new Date(nextData);
  269.                 var nextMonthFirstDayTime = dateObj.getTime(); //下个月一号对应毫秒
  270.                 var theMonthLastDayTime = nextMonthFirstDayTime - (24 * 60 * 60 * 1000);  //下个月一号减去一天，正好是这个月最后一天
  271.                 var monthLastDay = (new Date(theMonthLastDayTime)).getDate();
  273.                 return {
  274.                     date: this.o.year + '-' + this.o.month + '-' + monthLastDay,
  275.                     day: monthLastDay
  276.                 };
  277.             }
  279.             //上月最后一天
  280.             this.getPrevMonthDay = function() {
  281.                 if(this.o.month == 1) {
  282.                     var prevYear = this.o.year - 1;
  283.                     var prevMonth = 12;
  284.                 } else {
  285.                     var prevYear = this.o.year;
  286.                     var prevMonth = this.o.month - 1;
  287.                 }
  288.                 var prevData = this.o.year + '-' + this.o.month + '-1';  //当月1号
  289.                 var dateObj = new Date(prevData);
  290.                 var curMonthFirstDayTime = dateObj.getTime(); //当月一号对应毫秒
  291.                 var prevMonthLastDayTime = curMonthFirstDayTime - (24 * 60 * 60 * 1000);  //当月1号减去一天，得到上月最后一天
  292.                 var monthPrevDay = (new Date(prevMonthLastDayTime)).getDate();
  294.                 return {
  295.                     date: prevYear + '-' + prevMonth + '-' + monthPrevDay,
  296.                     day: monthPrevDay
  297.                 };
  298.             }
  300.             //下月最后一天
  301.             this.getNextMonthDay = function() {
  302.                 if(this.o.month == 12) {
  303.                     var nextYear = this.o.year + 1;
  304.                     var nextMonth = 1;
  305.                 } else {
  306.                     var nextYear = this.o.year;
  307.                     var nextMonth = this.o.month + 1;
  308.                 }
  309.                 var nextDate = nextYear + '-' + nextMonth + '-1';
  310.                 var nextObj = new dateRender(nextDate);
  311.                 var nextDateObj = nextObj.getMonthLastDay();
  312.                 return nextYear + '-' + nextMonth + '-' + nextDateObj.day;
  313.             }
  315.             this.getFullDays = function() {
  316.                 var dates = [];
  317.                 var monthFirstWeek = this.getMonthFirstWeek(); //当月第一天是周几
  318.                 var monthLastDay = this.getMonthLastDay();  //当前月最后一天
  319.                 if(monthFirstWeek.week != 1) {
  320.                     var prevMonthDay = this.getPrevMonthDay();  //上月最后一天
  321.                     var sub = monthFirstWeek.week == 0 ? 6 : monthFirstWeek.week - 1;
  322.                     var start = prevMonthDay.day - sub + 1;
  323.                     var prveDate = prevMonthDay.date;
  324.                     prveDate = prveDate.split('-');
  325.                     prveDate = prveDate[0] + '-' + prveDate[1] + '-';
  326.                     for(var i = start; i <= prevMonthDay.day; i++) {
  327.                         dates[dates.length] = {
  328.                             date: prveDate + i,
  329.                             day: getFmtNun(i),
  330.                             type: 'prev'
  331.                         };
  332.                     }
  333.                 }
  335.                 var curDate = monthLastDay.date;
  336.                 curDate = curDate.split('-');
  337.                 curDate = curDate[0] + '-' + curDate[1] + '-';
  338.                 for(var i = 1; i <= monthLastDay.day; i++) {
  339.                     dates[dates.length] = {
  340.                         date: curDate + i,
  341.                         day: getFmtNun(i),
  342.                         type: 'cur'
  343.                     };
  344.                 }
  346.                 return dates;
  347.             }
  349.         }
  351.         function dateAction(date) {
  352.             var o = new dateRender(date);
  353.             o.render();
  354.         }
  356.         function getDayActualDate(dayDate) {
  357.             var o = new getDate();
  358.             var fullDate = dayDate + ' ' + o.hour + ':' + o.minute + ':' + o.second;
  359.             dateAction(fullDate);
  360.         }
  362.         //实时显示时间
  363.         showActualDate = function(curDate, curFullDate) {
  364.             actualCmd = window.setTimeout(function() {
  365.                 var obj = new Date(curFullDate);
  366.                 var nextSecond = obj.getTime() + 1000;
  367.                 var nextObj = new Date(nextSecond);
  368.                 var nextDate = nextObj.getFullYear() + '-' + (nextObj.getMonth() + 1) + '-' + nextObj.getDate();
  369.                 var nextTime = getFmtNun(nextObj.getHours()) + ':' + getFmtNun(nextObj.getMinutes()) + ':' + getFmtNun(nextObj.getSeconds());
  370.                 var nextFullDate = nextDate + ' ' + nextTime;
  372.                 if(curDate == nextDate) {
  373.                     document.getElementById('time').innerHTML = nextTime;
  374.                 } else {
  375.                     dateAction(nextFullDate);
  376.                     return false;
  377.                 }
  378.                 console.log(nextFullDate)
  379.                 showActualDate(curDate, nextFullDate);
  380.             }, 985);
  381.         }
  383.         window.onload = function() {
  384.             dateAction();
  385.         }
  387.     </script>
  389. </head>
  390. <body>
  391.     <section class="main">
  392.         <div class="date-box yeah-box">
  393.             <div>
  394.                 <a href="javascript:;" id="prevYear"><上年</a>
  395.             </div>
  396.             <div>
  397.                 <a href="javascript:;" id="prevMonth"><上月</a>
  398.             </div>
  399.             <div class="yeah" id="yeah">
  401.             </div>
  402.             <div>
  403.                 <a href="javascript:;" id="nextMonth">下月></a>
  404.             </div>
  405.             <div>
  406.                 <a href="javascript:;" id="nextYear">下年></a>
  407.             </div>
  408.         </div>
  409.         <div class="date-box" id="date">
  411.         </div>
  412.         <div class="date-box cur-time" id="time">
  414.         </div>
  415.         <ul class="date-box date-line week-line">
  416.             <li data-id="1">周一</li>
  417.             <li data-id="2">周二</li>
  418.             <li data-id="3">周三</li>
  419.             <li data-id="4">周四</li>
  420.             <li data-id="5">周五</li>
  421.             <li data-id="6">周六</li>
  422.             <li data-id="0">周日</li>
  423.         </ul>
  424.         <ul class="date-box date-line" id="dateBox">
  426.         </ul>
  427.         <div class="date-box">
  428.             <a href="javascript:;" onclick="dateAction();" class="cur-time-btn">当前时间</a>
  429.         </div>
  430.     </section>
  431. </body>
  432. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行