JavaScript實現(xiàn)簡單日歷效果

更新時間：2020年09月11日 08:49:11 作者：qq_38455564

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)簡單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)效果：

根據(jù)所選擇的年月，列出當(dāng)月對應(yīng)是周幾，效果圖如下：

實現(xiàn)思路：

1、使用select標(biāo)簽保存年月的所選菜單。使用table標(biāo)簽保存當(dāng)月天數(shù)，表頭為固定的周日周一等。

2、使用option對象，給年月循環(huán)賦值。

3、將每月的天數(shù)保存到數(shù)組中，根據(jù)所選的年月獲取當(dāng)月的天數(shù)，以及當(dāng)月一號對應(yīng)周幾，對應(yīng)周幾就在第一行先打印幾個空格，然后從一號開始依次打印當(dāng)月天數(shù)。

4、刷新年月時，清除上次表格中（除表頭的周）的數(shù)據(jù)，重新填入數(shù)據(jù)。

代碼實現(xiàn)：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <!--CSS樣式-->
 <style type="text/css">
 *{margin: 0px;padding: 0px;}
 #div{width: 400px;height: 300px;border: 1px solid red;margin: auto;}
 #div div:nth-child(1){display: flex;align-items: center;justify-content: center;}
 #tbcal{border-collapse: collapse;width: 100%;text-align: center;}
 #tbcal tr td{border: 1px solid red;}
 </style>
 <script type="text/javascript">
// 加載完HTML內(nèi)容后,JavaScript開始執(zhí)行
 window.onload=function(){
 initial();
 document.getElementById("selyear").onchange=show;
 document.getElementById("selmonth").onchange=show;
 show();
 }
// 顯示日歷
 function show(){
// 獲取鼠標(biāo)點擊所選擇的年月值
 var year=parseInt(document.getElementById("selyear").value);
 var month=parseInt(document.getElementById("selmonth").value);
// 判斷是否為閏年,以便確定2月的天數(shù)
 var flag=year%4==0&&year%100!=0||year%400==0;
 var dayofmonth=[31,flag?29:28,31,30,31,30,31,31,30,31,30,31];
// 給date賦值,值為所選擇的某年某月一號
 var dt=new Date();
 dt.setFullYear(year);
 dt.setMonth(month-1);
 dt.setDate(1);
// 獲取date對應(yīng)周幾
 var week=dt.getDay();
// 當(dāng)月應(yīng)該打印多少行
 var rows=Math.ceil((dayofmonth[dt.getMonth()]+week)/7);
 var k=0;
// 如果表格中有除表頭外的數(shù)據(jù),進(jìn)行數(shù)據(jù)刪除,避免上次月份的數(shù)據(jù)對下次有影響
 var table=document.getElementById("tbcal");
 while(table.rows.length>1){
  table.deleteRow(1);
  
 }
// 循環(huán)向表格中添加數(shù)據(jù)，生成日歷
 for(var i=0;i<rows;i++){
  var row=table.insertRow(i+1);
  for(var j=0;j<7;j++){
  var cell=row.insertCell(j);
  k++;
  if(k<=week || k>dayofmonth[dt.getMonth()]+week){
  cell.innerHTML="";
  }
  else{
  cell.innerHTML=k-week;
  }
  }
 }
 }
// 通過option對象向年月中循環(huán)賦值
 function initial(){
 var years=document.getElementById("selyear");
 var months=document.getElementById("selmonth");
 for (var i=1990;i<2019;i++) {
  var option=document.createElement("option");
  option.text=i;
  years.add(option);
 }
 for (var i=1;i<13;i++) {
  var option=document.createElement("option");
  option.text=i;
  months.add(option);
 }
 }
 </script>
 </head>
 <body>
 <div id="div">
 <!--定義年月菜單-->
 <div>
 <select id="selyear"></select>&nbsp;年&nbsp;
 <select id="selmonth"></select>&nbsp;月&nbsp;
 </div>
 <div>
 <!--定義列表-->
 <table id="tbcal">
  <tr>
  <td>周日</td>
  <td>周一</td>
  <td>周二</td>
  <td>周三</td>
  <td>周四</td>
  <td>周五</td>
  <td>周六</td>
  </tr>
 </table>
 </div>
 </div>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: