純js模仿windows系統(tǒng)日歷

在網(wǎng)上看了幾篇關(guān)于生成日歷的js 教程于是自己也整理了一個(gè)想法思路大家有什么建議歡迎提出

西烏珠穆沁ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

首先這個(gè)項(xiàng)目里面本人認(rèn)為的幾個(gè)難點(diǎn)：

1、如何定義每一個(gè)月的第一天位置

每個(gè)月的第一天都不是固定的星期幾，所以第一天的輸出需要?jiǎng)觿?dòng)腦筋把它放到對(duì)應(yīng)的星期里面

2、每個(gè)月的最后一天有時(shí)候因?yàn)樾袛?shù)不夠輸出不了怎么辦？

下面會(huì)有答案 ^_^

思路：

1、定義好每一個(gè)月份的日期天數(shù)

2、獲取當(dāng)前的系統(tǒng)日期初始化數(shù)據(jù)

3、輸出日歷

    2.1、先獲取當(dāng)前月的第一天是星期幾（這一點(diǎn)與日歷的排版至關(guān)重要?。?br />    2.2、獲取當(dāng)前月的天數(shù)
    2.3、獲取當(dāng)前月有多少個(gè)星期（即要輸出多少行行數(shù)這里我會(huì)預(yù)留多一行）
    2.4、獲取當(dāng)前年份和月份用作顯示

下面便是完整的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js 日歷</title>
 <style type="text/css">
  *{
  border: 0;
  padding: 0;
  margin: 0;
  font-family: "微軟雅黑";
  }
  a{
  text-decoration: none;
  color: #000;
  }
  li{
  list-style-type: none;
  }
  .calendar_wrap{
  width: 350px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid #000;
  }
  .calendar_list{
  width: 100%;
  margin-top: 10px;
  }
  .calendar_list tr{
  width: 100%;
  }
  .calendar_list tr td{
  text-align: center;
  height: 45px;
  }
  .control_bar{
  word-spacing: -6px;
  }
  .control_bar span,.control_bar b{
  display: inline-block;
  text-align: center;
  word-spacing: 0px;
  }
  .left-bt,.right-bt{
  width: 50px;
  }
  #reduce_bt,#add_bt{
  width: 50%;
  height: 25px;
  border-radius: 50%;
  }
  #reduce_bt:focus{
  outline: none;
  }
  #add_bt:focus{
  outline: none;
  }
  #current_date{
  width: 250px;
  }
  #resetBt{
  display: block;
  text-align: center;
  color: #fff;
  cursor: pointer;
  width: 120px;
  line-height: 40px;
  background-color: #FF7F27;
  margin: 0 auto;
  }
  #date_list tr td:hover{
  background-color: #ccc;
  cursor: default;
  }
 </style>
</head>
<body>
 <div class="calendar_wrap">
 <div class="control_bar">
  <span class="left-bt"><input type="button" id="reduce_bt" value="<"></span>
  <b id="current_date">2017-02</b>
  <span class="right-bt"><input type="button" id="add_bt" value=">"></span>
 </div>
 <table class="calendar_list" cellspacing="0">
  <thead>
   <tr>
   <td>日</td>
   <td>一</td>
   <td>二</td>
   <td>三</td>
   <td>四</td>
   <td>五</td>
   <td>六</td>
   </tr> 
  </thead>
  <tbody id="date_list"></tbody> 
 </table>
 </div>
 <span id="resetBt">回到現(xiàn)在日期</span>
 <script type="text/javascript">
  var dateScreen = document.getElementById('current_date');//獲取顯示當(dāng)前年份月份的div
  var reduceBt = document.getElementById('reduce_bt');//獲取減少月份的按鈕
  var addBt = document.getElementById('add_bt');//獲取增加月份的按鈕
  var dateList = document.getElementById('date_list');//獲取顯示所有日期部分
  var resetBt = document.getElementById('resetBt');//獲取重設(shè)按鈕
  //定義好每月的日期總數(shù) 總數(shù)按js 獲取月份數(shù)值的下標(biāo)方式儲(chǔ)存
  var overall_date = [31,28,31,30,31,30,31,31,30,31,30,31];
  var add_date = 1;//定義添加日期數(shù)的初始化
  //初始化日歷
  //獲取現(xiàn)在的日期
  var now_date = new Date();
  var nowFullYear = now_date.getFullYear();
  var nowMonth = now_date.getMonth();
  //執(zhí)行日歷輸出函數(shù)
  printCalendar();
  //-----------------------------------
  //月份減少按鈕點(diǎn)擊事件
  reduceBt.onclick = function(){
  nowMonth = nowMonth - 1;
  if (nowMonth == -1) {
  nowFullYear = nowFullYear - 1;
  nowMonth = 11;
  }
  clearRows();
  printCalendar();
  }
  //增加月份按鈕點(diǎn)擊事件
  addBt.onclick = function(){
  nowMonth+= 1;
  if (nowMonth == 12) {
  nowFullYear+= 1;
  nowMonth = 0;
  } 
  clearRows();
  printCalendar();
  }
  //重設(shè)按鈕點(diǎn)擊事件
  resetBt.onclick = function(){
  var resetDate = new Date();
  nowFullYear = resetDate.getFullYear();
  nowMonth = resetDate.getMonth();
  clearRows();
  printCalendar();
  }
  function printCalendar(){
  var printDate = new cur_date(nowFullYear,nowMonth);//實(shí)例cur_date方法
  var printFirstDay = printDate.firstDay;//獲取要輸出月份第一天的星期
  var printTotalDate = printDate.totalDate;//獲取輸出日期的總數(shù)
  var printMonth = printDate.cur_month;//獲取輸出的月份
  (printMonth >= 9)?(printMonth = (printMonth + 1)):(printMonth = ("0" + (printMonth + 1)));
  //調(diào)整月份的顯示格式
  var printYear = printDate.cur_year;//獲取輸出的年份
  var totalRows = Math.ceil((printTotalDate + (printFirstDay - 1)) / 7) + 1;
  //獲取行數(shù)
  //利用天數(shù)除以7天獲得行數(shù)并將它向上去整 但是上限是5
  //而考慮到某些月會(huì)有6行所以在總行數(shù)里面加1 以防萬(wàn)一
  //開(kāi)始輸出
  //首先顯示出年和月
  dateScreen.innerText = printYear + "-" + printMonth;
   //開(kāi)始輸出日期
   for (var i = 0; i < totalRows; i++) {
   dateList.insertRow(i);
   for (var j = 0; j < 7; j++) {
   //當(dāng)天數(shù)總量大于額定總量時(shí)先終止內(nèi)部循環(huán)
   if (add_date > printTotalDate) {
   break;
   }
   dateList.rows[i].insertCell(j);
   //改變周日和周六的文字顏色
   if (j == 0) {
   dateList.rows[i].cells[j].style.color = "red";
   dateList.rows[i].cells[j].style.fontWeight = "bold";
   }else if(j == 6){
   dateList.rows[i].cells[j].style.color = "green";
   dateList.rows[i].cells[j].style.fontWeight = "bold";
   }
   if (i == 0 && j >= printFirstDay) {
   //當(dāng)此時(shí)是第一行時(shí)而且單元格下標(biāo)大于等于當(dāng)前月第一天的星期就開(kāi)始為單元格填入文本
   dateList.rows[i].cells[j].innerText = add_date;
   add_date++;
   }else if(i > 0){
   //第一行以后的單元格就按循環(huán)添加即可
   dateList.rows[i].cells[j].innerText = add_date;
   add_date++;
   }
   }
   }
  add_date = 1;//輸出完把日期總數(shù)重新賦值為1
  }
  //獲取當(dāng)前年、月、第一天是星期幾、日期總數(shù)
  function cur_date(curYear,curMonth){
  this.cur_firstDate = new Date(curYear,curMonth,1);//獲取現(xiàn)在日期的第一天
  this.cur_year = curYear;//獲取當(dāng)前的年
  this.cur_month = curMonth;//獲取當(dāng)前的月
  this.totalDate = is_leapYear(curYear,curMonth);//獲取總天數(shù)
  this.firstDay = this.cur_firstDate.getDay()//獲取每個(gè)月的第一天是星期幾
  }
  //判斷今年是否為閏年
  function is_leapYear(target_year,target_month){
  if ((target_month == 1) && (target_year % 4 == 0) && ((target_year % 100 != 0) || (target_year % 400 != 0))) {
     //當(dāng)前月是2月且當(dāng)前年是閏年
     return 29;
  }else{
  //其他月按正常日期總數(shù)輸出
  return overall_date[target_month];
  }
  }
  function clearRows(){
  var rowsNum = dateList.rows.length;
  while(rowsNum > 0){
   dateList.deleteRow(rowsNum - 1);
   rowsNum--;
  }
  }
 </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！

文章題目：純js模仿windows系統(tǒng)日歷
網(wǎng)頁(yè)鏈接：http://aaarwkj.com/article42/jescec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、電子商務(wù)、服務(wù)器托管、網(wǎng)站排名、云服務(wù)器、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

純js模仿windows系統(tǒng)日歷