js+html制作簡單日歷的方法

更新時間：2017年06月27日 17:09:45 作者：永朋

這篇文章主要為大家詳細介紹了js html制作簡單日歷的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

新手一枚，不會寫什么高大上的博文，一些平時做的小練習，獻丑

代碼：

<!doctype html>
<html>

 <head>
 <meta charset="utf-8">
 <title>無標題文檔</title>
 <style>
  * {margin: 0;padding: 0}
  #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
  #calendar h4 {text-align: center;margin-bottom: 10px}
  #calendar .a1 {position: absolute;top: 20px;left: 20px;}
  #calendar .a2 {position: absolute;top: 20px;right: 20px;}
  #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}
  #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}
  #calendar .dateList {overflow: hidden;clear: both}
  #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}
  #calendar .dateList .ccc {color: #ccc;}
  #calendar .dateList .red {background: #F90;color: #fff;}
  #calendar .dateList .sun {color: #f00;}
 </style>
 <script src="js/jquery-1.11.3.min.js"></script>
 <script>
  $(function() {

  //必要的數(shù)據(jù)
  //今天的年 月 日 ；本月的總天數(shù)；本月第一天是周幾？？？
  var iNow=0;
  
  function run(n) {

   var oDate = new Date(); //定義時間
   oDate.setMonth(oDate.getMonth()+n);//設置月份
   var year = oDate.getFullYear(); //年
   var month = oDate.getMonth(); //月
   var today = oDate.getDate(); //日

   //計算本月有多少天
   var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

   //判斷閏年
   if(month == 1) {
   if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    allDay = 29;
   }
   }

   //判斷本月第一天是星期幾
   oDate.setDate(1); //時間調(diào)整到本月第一天
   var week = oDate.getDay(); //讀取本月第一天是星期幾

   //console.log(week);
   $(".dateList").empty();//每次清空
   //插入空白

   for(var i = 0; i < week; i++) {
   $(".dateList").append("<li></li>");
   }

   //日期插入到dateList
   for(var i = 1; i <= allDay; i++) {
   $(".dateList").append("<li>" + i + "</li>")
   }
   //標記顏色=====================
   $(".dateList li").each(function(i, elm){
   //console.log(index,elm);
   var val = $(this).text();
   //console.log(val);
   if (n==0) {
    if(val<today){
    $(this).addClass('ccc')
   }else if(val==today){
    $(this).addClass('red')
   }else if(i%7==0 || i%7==6 ){
    $(this).addClass('sun')
   }
   }else if(n<0){
    $(this).addClass('ccc')
   }else if(i%7==0 || i%7==6 ){
    $(this).addClass('sun')
   }
   });

   //定義標題日期
   $("#calendar h4").text(year + "年" + (month + 1) + "月");
  };
  run(0);
  
  $(".a1").click(function(){
   iNow--;
   run(iNow);
  });
  
  $(".a2").click(function(){
   iNow++;
   run(iNow);
  })
  });
 </script>
 </head>

 <body>
 <div id="calendar">
  <h4>2013年10月</h4>
  <a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a>
  <a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a>
  <ul class="week">
  <li>日</li>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li>六</li>

  </ul>
  <ul class="dateList"></ul>
 </div>

 </body>

</html>

更多精彩內(nèi)容請點擊專題《javascript日歷插件使用方法匯總》進行學習

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

您可能感興趣的文章:

js
日歷

理解js回收機制通俗易懂版
這篇文章主要幫助大家更好的理解js回收機制，通俗易懂，便于大家理解，感興趣的小伙伴們可以參考一下
2016-02-02
JS原生2048小游戲源碼分享(全網(wǎng)最新)
這篇文章主要介紹了JS原生2048小游戲源碼分享,實現(xiàn)代碼全部是給予js實現(xiàn)的，代碼簡單易懂對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-05-05
JavaScript關閉當前頁面(窗口)不帶任何提示
這篇文章主要介紹了JavaScript關閉當前頁面(窗口)不帶任何提示的具體實現(xiàn),需要的朋友可以參考下
2014-03-03
Three.js后期處理效果(發(fā)光描邊OutlinePass)
這篇文章主要給大家介紹了關于Three.js后期處理效果(發(fā)光描邊OutlinePass)的相關資料,Three js 開發(fā)的一些知識整理,方便后期遇到類似的問題,能夠及時查閱使用,需要的朋友可以參考下
2024-01-01
JS獲取html對象的幾種方式介紹
這篇文章主要介紹了JS獲取html對象的幾種方式，有需要的朋友可以參考一下
2013-12-12
js通過更改按鈕的顯示樣式實現(xiàn)按鈕的滑動效果
使用js實現(xiàn)按鈕的滑動效果，通過更改按鈕的顯示樣式，來實現(xiàn)按鈕動態(tài)滑動,需要的朋友可以參考下
2014-04-04
javascript實現(xiàn)左右控制無縫滾動
這篇文章主要介紹了javascript實現(xiàn)左右控制無縫滾動的方法及示例代碼,需要的朋友可以參考下
2014-12-12
6行代碼實現(xiàn)微信小程序頁面返回頂部效果
這篇文章主要為大家詳細介紹了6行代碼實現(xiàn)微信小程序頁面返回頂部效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
JavaScript中click和onclick本質(zhì)區(qū)別與用法分析
這篇文章主要介紹了JavaScript中click和onclick本質(zhì)區(qū)別與用法,結(jié)合實例形式分析了JavaScript中click和onclick的具體概念、功能、使用場景及相關操作技巧,需要的朋友可以參考下
2018-06-06
web.js.字符串與正則表達式操作
這篇文章主要介紹了web.js.字符串與正則表達式操作的相關資料,需要的朋友可以參考下
2017-05-05