使用JavaScript制作简单日历

黄良钵

分类: 程序开发 882 0

使用JavaScript制作简单日历

使用JavaScript制作如上图的简单日历,这里有两种做法:

第一种:

  1. // 定义一个构造函数
  2. function Calender(month){
  3.     var div
  4.     // 定义一个属性表示当前要展示的一个月份
  5.     this.currentMonth = month || new Date()
  6.     // 如果调用者每一传递month参数
  7.     // 那么this.currentMonth = month
  8.     // 如果调用者没有传递month参数 
  9.     // 或者传了被认为false的值 
  10.     // 那么this.currentMonth = new Date()
  11.     // 将当前的月份的日期设置为1号
  12.     this.currentMonth.setDate(1)
  13.     // 获取当前展示月的第一天
  14.     this.getFirstDate = function(){
  15.         var week = this.currentMonth.getDay()
  16.         if(week == 0) week = 7
  17.         week -= 2  // week = week -2
  18.         var firstDate = new Date(this.currentMonth)
  19.         // 得到星期一是几月几号
  20.         firstDate.setDate(-week)
  21.         // 将firstDate返还给本函数的调用者
  22.         return firstDate
  23.     }
  24.     // 显示日历的主体部分
  25.     this.showCalenderMain = function(){
  26.         div = document.createElement('div')
  27.         div.style.width = '450px'
  28.         div.style.minHeight = '100px'
  29.         div.style.backgroundColor = 'red'
  30.         document.body.appendChild(div)
  31.     }
  32.     // 展示日历的表头部分
  33.     this.showHeader = function(){
  34.         var table =document.createElement('table')
  35.         table.style.width = '100%'
  36.         // 在表格中插入一行
  37.         var tr = table.insertRow()
  38.         function getWeekName(week){
  39.             switch(week){
  40.                 case 1:
  41.                 return '一'
  42.                 case 2:
  43.                 return '二'
  44.                 case 3:
  45.                 return '三'
  46.                 case 4:
  47.                 return '四'
  48.                 case 5:
  49.                 return '五'
  50.                 case 6:
  51.                 return '六'
  52.                 case 7:
  53.                 return '日'
  54.             }
  55.         }
  56.         for(var i =1;i <= 7;i++){
  57.             var td = tr.insertCell()
  58.             td.style.color = 'white'
  59.             td.style.textAlign = 'center'
  60.             td.innerHTML =getWeekName(i)
  61.         }
  62.         div.appendChild(table)
  63.     }
  64.     this.showBody = function(){
  65.         var firstDate = this.getFirstDate().getTime()
  66.         var table = document.createElement('table')
  67.         table.style.width = '100%'
  68.         for(var i = 0;i<6;i++){
  69.             var tr = table.insertRow()
  70.             for(var j = 0;j < 7;j++){
  71.                 var td = tr.insertCell()
  72.                 td.style.textAlign = 'center'
  73.                 td.style.color = 'white'
  74.                 td.style.height = '2em'
  75.                 var n = i * 7 + j
  76.                 var cellDate = new Date(firstDate + n*24*60*60*1000)
  77.                 console.log(cellDate)
  78.                 td.innerHTML = cellDate.getDate()
  79.                 if(cellDate.getMonth() != this.currentMonth.getMonth()){
  80.                     td.style.color = 'gray'
  81.                 }
  82.                 if(cellDate.getDate() == new Date().getDate() && cellDate.getMonth() == new Date().getMonth()){
  83.                     td.style.backgroundColor = 'rgba(0,0,255,0.3)'
  84.                 }
  85.             }
  86.         }
  87.         div.appendChild(table)
  88.     }
  89.     this.showToobar = function(){
  90.         var toolbar = document.createElement('div')
  91.         toolbar.style.fontSize = '1.5rem'
  92.         toolbar.style.color = 'white'
  93.         toolbar.style.padding = '20px'
  94.         toolbar.innerHTML = this.currentMonth.getFullYear() + '年' +
  95.                             (this.currentMonth.getMonth() + 1) + '月'
  96.         div.appendChild(toolbar)
  97.         var next = document.createElement('span')
  98.         next.innerHTML = '&#x3000;&gt'
  99.         next.style.cursor = 'pointer'
  100.         next.style.float = 'right'
  101.         toolbar.appendChild(next)
  102.         var calender = this
  103.         next.onclick =function(){
  104.             var month = calender.currentMonth.getMonth()
  105.             month++
  106.             calender.currentMonth.setMonth(month)
  107.             document.body.innerHTML = ''
  108.             calender.show()
  109.         }
  110.         var prev = document.createElement('span')
  111.         prev.innerHTML = '&lt;&nbsp;'
  112.         prev.style.float = 'right'
  113.         prev.style.cursor = 'pointer'
  114.         toolbar.appendChild(prev)
  115.         prev.onclick =function(){
  116.             var month = calender.currentMonth.getMonth()
  117.             month--
  118.             calender.currentMonth.setMonth(month)
  119.             document.body.innerHTML = ''
  120.             calender.show()
  121.         }
  122.     }
  123.     this.show = function(){
  124.         this.showCalenderMain()
  125.         this.showToobar()
  126.         this.showHeader()
  127.         this.getFirstDate()
  128.         this.showBody()
  129.     }
  130. }
  131. var calender = new Calender()
  132. calender.show()

第二种:

css:

  1. *{
  2.     box-sizing: border-box;
  3.     user-select:none;
  4. }
  5. html,body{
  6.     height: 100%;
  7.     font-weightbold;
  8.     font-family: 宋体;
  9. }
  10. section{
  11.     width450px;
  12.     height350px;
  13.     background-colorred;
  14.     padding18px;
  15. }
  16. header{
  17.     height50px;
  18.     width: 100%;
  19.     colorwhite;
  20.     font-size25px;
  21.     display: flex;
  22.     justify-content: space-between;
  23. }
  24. .currentDay {
  25. colorblue;
  26. }
  27. .currentMonth {
  28. colorwhite;
  29. }
  30. .otherMonth{
  31. color#837F7D;
  32. }
  33. .calendar-table{
  34.     width: 100%;
  35.     border-collapsecollapse;
  36.     colorwhite;
  37.     text-align:center;
  38. }
  39. tr{
  40.     height35px;
  41.     line-height35px;
  42. }
  43. header>div>span:hover{
  44.     cursorpointer;
  45. }

HTML:

  1. <section>
  2.     <header>
  3.         <div id="date-title"></div>
  4.         <div>
  5.             <span id="left">&lt;</span>&#x3000;
  6.             <span id="right">&gt;</span>
  7.         </div>
  8.     </header>
  9.     <main></main>
  10. </section>

JavaScript:

  1. var dateObj = (function(){
  2.     var date = new Date()
  3.     return {
  4.         getDate:function(){
  5.             return date
  6.         },
  7.         setDate:function(date1){
  8.             date = date1
  9.         }
  10.     }
  11. })()
  12. function table(){
  13.     var dateMain = document.querySelector('main')
  14.     var tableTitle = "<tr>" +
  15.                 "<th>日</th>" +
  16.                 "<th>一</th>" +
  17.                 "<th>二</th>" +
  18.                 "<th>三</th>" +
  19.                 "<th>四</th>" +
  20.                 "<th>五</th>" +
  21.                 "<th>六</th>" +
  22.                 "</tr>"
  23.     var tableBody = ''
  24.     for(var i = 0;i < 6;i++){
  25.         tableBody += "<tr>" +
  26.                 "<td></td>" +
  27.                 "<td></td>" +
  28.                 "<td></td>" +
  29.                 "<td></td>" +
  30.                 "<td></td>" +
  31.                 "<td></td>" +
  32.                 "<td></td>" +
  33.                 "</tr>"
  34.     }
  35.     dateMain.innerHTML = "<table id='calendarTable' class='calendar-table'>" + tableTitle + tableBody + "</table>"
  36. }
  37. table()
  38. function showDate(){
  39.     var yy = dateObj.getDate().getFullYear()
  40.     var mm = dateObj.getDate().getMonth() + 1;
  41.     var dateTitle = document.querySelector('#date-title')
  42.     dateTitle.innerText = yy + '年' + mm + '月'
  43.     var table = document.getElementById("calendarTable")
  44.     var tds = table.getElementsByTagName('td')
  45.     var firstDay = new Date(yy,mm - 1,1)
  46.     for(var i = 0;i < tds.length;i++){
  47.         var thisDay = new Date(yy,mm - 1,i + 1 - firstDay.getDay())
  48.         var thisDayStr = getDateStr(thisDay);
  49.         tds[i].innerText = thisDay.getDate()
  50.         if(thisDayStr == getDateStr(new Date())) {
  51.             tds[i].className = 'currentDay';
  52.         }else if(thisDayStr.substr(0, 6) == getDateStr(firstDay).substr(0, 6)) {
  53.             tds[i].className = 'currentMonth';
  54.         }else {
  55.             tds[i].className = 'otherMonth';
  56.         }
  57.     }
  58. }
  59. showDate()
  60. var left = document.getElementById("left");
  61. var right = document.getElementById("right");
  62. left.addEventListener('click',function(){
  63.     var date = dateObj.getDate();
  64.     dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
  65.     showDate();
  66. })
  67. right.addEventListener('click',function(){
  68.     var date = dateObj.getDate();
  69.     dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
  70.     showDate();
  71. })
  72. function getDateStr(date) {
  73.         var yy = date.getFullYear();
  74.         var mm = date.getMonth() + 1;
  75.         var dd = date.getDate();
  76.         mm = (mm > 9) ? ("" + mm) : ("0" + mm);
  77.         dd = (dd > 9) ? ("" + dd) : ("0" + dd);
  78.         return yy + mm + dd;
  79.     }

演示效果:

第一种第二种

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、日历

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “使用JavaScript制作简单日历”

Loading...