• 当前标签:日历

程序开发 使用JavaScript制作简单日历

使用JavaScript制作如上图的简单日历,这里有两种做法: 第一种: // 定义一个构造函数 function Calender(month){     var div     // 定义一个属性表示当前要展示的一个月份     this.currentMonth = month || new Date()     // 如果调用者每一传递month参数     // 那么this.currentMonth = month     // 如果调用者没有传递month参数      // 或者传了被认为false的值      // 那么this.currentMonth = new Date()     // 将当前的月份的日期设置为1号     this.currentMonth.setDate(1)     // 获取当前展示月的第一天     this.getFirstDate = function(){         var week = this.currentMonth.getDay()         if(week == 0) week = 7         week -= 2  // week = week -2         var firstDate = new Date(this.currentMonth)         // 得到星期一是几月几号         firstDate.setDate(-week)         // 将firstDate返还给本函数的调用者         return firstDate     }     // 显示日历的主体部分     this.showCalenderMain = function(){         div = document.createElement('div')         div.style.width = '450px'         div.style.minHeight = '100px'         div.style.backgroundColor = 'red'         document.body.appendChild(div)     }     // 展示日历的表头部分     this.showHeader = function(){         var table =document.createElement('table')         table.style.width = '100%'         // 在表格中插入一行         var tr = table.insertRow()         function getWeekName(week){             switch(week){                 case 1:                 return '一'                 case 2:                 return '二'                 case 3:                 return '三'                 case 4:                 return '四'                 case 5:                 return '五'                 case 6:                 return '六'                 case 7:                 return '日'             }         }         for(var i =1;i <= 7;i++){             var td = tr.insertCell()             td.style.color = 'white'             td.style.textAlign = 'center'             td.innerHTML =getWeekName(i)         }         div.appendChild(table)     }     this.showBody = function(){         var firstDate = this.getFirstDate().getTime()         var table = document.createElement('table')         table.style.width = '100%'         for(var i = 0;i<6;i++){             var tr = table.insertRow()             for(var j = 0;j < 7;j++){                 var td = tr.insertCell()                 td.style.textAlign = 'center'                 td.style.color = 'white'                 td.style.height = '2em'                 var n = i * 7 + j                 var cellDate = new Date(firstDate + n*24*60*60*1000)                 console.log(cellDate)                 td.innerHTML = cellDate.getDate()                 if(cellDate.getMonth() != this.currentMonth.getMonth()){                     td.style.color = 'gray'                 }                 if(cellDate.getDate() == new Date().getDate() && cellDate.getMonth() == new Date().getMonth()){                     td.style.backgroundColor = 'rgba(0,0,255,0.3)'                 }             }         }         div.appendChild(table)     }     this.showToobar = function(){         var toolbar = document.createElement('div')         toolbar.style.fontSize = '1.5rem'         toolbar.style.color = 'white'         toolbar.style.padding = '20px'         toolbar.innerHTML = this.currentMonth.getFullYear() + '年' +                             (this.currentMonth.getMonth() + 1) + '月'         div.appendChild(toolbar)         var next = document.createElement('span')         next.innerHTML = ' &gt'         next.style.cursor = 'pointer'         next.style.float = 'right'         toolbar.appendChild(next)         var calender = this         next.onclick =function(){             var month = calender.currentMonth.getMonth()             month++             calender.currentMonth.setMonth(month)             document.body.innerHTML = ''             calender.show()         }         var prev = document.createElement('span')         prev.innerHTML = '< '         prev.style.float = 'right'         prev.style.cursor = 'pointer'         toolbar.appendChild(prev)         prev.onclick =function(){             var month = calender.currentMonth.getMonth()             month--             calender.currentMonth.setMonth(month)             document.body.innerHTML = ''             calender.show()         }     }     this.show = function(){         this.showCalenderMain()         this.showToobar()         this.showHeader()         this.getFirstDate()         this.showBody()     } } var calender = new Calender() calender.show() 第二种: css: *{     box-sizing: border-box;     user-select:none; } html,body{     height: 100%;     font-weight: bold;     font-family: 宋体; } section{     width: 450px;     height: 350px;     background-color: red;     padding: 18px; } header{     height: 50px;     width: 100%;     color: white;     font-size: 25px;     display: flex;     justify-content: space-between; } .currentDay {

2017-07-31 21:16:53 135 0 0
阅读详情
  • 1
前往