JavaScript裏的Date 對象屬性及對象方法－－實現簡單的日歷

阿新 • • 發佈：2017-07-27

tor 個數 lin all date rip rec 說明進行

上網搜索"js 日歷插件"就會出來各種效果的功能豐富的日歷插件,很多都可以下載源碼,然後根據各自的需求對源碼進行修改就可以直接用了.

但今天講的不是如何使用這些插件,而是講如何實現一個很簡單的只有當前這個月的日歷，具體效果如下圖：

技術分享 ( 截圖時間是 2017-7-27 )，下面展示一下實現的代碼:

 .wrap {
       font-size: 0;
 }
 .weeks span {
       display: inline-block;
       font-size: 14px;
       width: 47px;
       height: 44px;
       line-height 
: 44px;
       border: 1px solid #EFEFEF;
       text-align: center;
  }
  #dates span{
      font-size: 14px;
      display: inline-block;
      width:47px;
      height: 49px;
      line-height: 49px;
      text-align: center;
      border: 1px solid #EFEFEF;
  }
  #dates span.today {
      color: #00ADB5 
;
  }

<div class="wrap">
    <div class="weeks">
        <span>日</span>
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</ 
span>
    </div>
    <div id="dates">
                
    </div>
</div>

var moday=[ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; // 寫出每月的總天數，把天數定義給一個數組
var d=new Date();
var month=d.getMonth()+1;      //當前的月份
var days=d.getDate();          //當前月的號數
var years=d.getFullYear();     //當前的年份
var run=years%4;               // 2月份的天數必須得區分今年是不是閏年 
if(run!=0){
     moday[1]=28;//2月份的天數
}else{
     moday[1]=29;
}
var date=new Date();
date.setDate(1);  //設置當前月的某一天。  日歷都是星期日在第一位，星期六在最後一位：
var momatch=[0,1,2,3,4,5,6];//這個存的是當前月的一號前面有多少空位，周日沒有，周一一個以此類推
var dangqian=momatch[date.getDay()];

var dates=document.getElementById("dates");
for(i=1;i<=parseInt(dangqian);i++){
    dates.innerHTML+=‘<span>‘+‘&nbsp;‘+‘</span>‘;
}
var preAll = parseInt(moday[month-1]+dangqian);  //當前月1號前面的空白個數+這個月總天數
for(i=parseInt(dangqian+1);i<= preAll;i++){
    if(i%7==1 && i!=1){
        dates.innerHTML+=‘<br>‘;    //每七個是一行
     } 
    if(i==(days+dangqian)){    //給今天添加類名,方便設置樣式  days是當前號數加上前面的空白天數就是i
        dates.innerHTML+=‘<span class="today">‘+parseInt(i-dangqian)+‘</span>‘;
     }else {
        dates.innerHTML+=‘<span>‘+parseInt(i-dangqian)+‘</span>‘;
     }
}
for(i=preAll;i< (parseInt(preAll/7)+1)*7 ;i++){
    dates.innerHTML+=‘<span>‘+‘&nbsp;‘+‘</span>‘;   //補全表格的空余部分
}

直接看上面實現的代碼應該不難理解該日歷實現的原理,如果不能理解的話,我們一起來學習下JavaScript裏面對時間日期的相關屬性和方法.

上面的代碼用到的方法在下面都有說明，而且很清晰哦！

Date 對象屬性

屬性	描述
constructor	返回對創建此對象的 Date 函數的引用。
prototype	使您有能力向對象添加屬性和方法。

Date 對象方法

方法	描述
Date()	返回當日的日期和時間。
getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()	從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth()	從 Date 對象返回月份 (0 ~ 11)。
getFullYear()	從 Date 對象以四位數字返回年份。
getYear()	請使用 getFullYear() 方法代替。
getHours()	返回 Date 對象的小時 (0 ~ 23)。
getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds()	返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒數。
getTimezoneOffset()	返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
getUTCDate()	根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
getUTCDay()	根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根據世界時從 Date 對象返回月份 (0 ~ 11)。
getUTCFullYear()	根據世界時從 Date 對象返回四位數的年份。
getUTCHours()	根據世界時返回 Date 對象的小時 (0 ~ 23)。
getUTCMinutes()	根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
getUTCSeconds()	根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
getUTCMilliseconds()	根據世界時返回 Date 對象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒數。
setDate()	設置 Date 對象中月的某一天 (1 ~ 31)。
setMonth()	設置 Date 對象中月份 (0 ~ 11)。
setFullYear()	設置 Date 對象中的年份（四位數字）。
setYear()	請使用 setFullYear() 方法代替。
setHours()	設置 Date 對象中的小時 (0 ~ 23)。
setMinutes()	設置 Date 對象中的分鐘 (0 ~ 59)。
setSeconds()	設置 Date 對象中的秒鐘 (0 ~ 59)。
setMilliseconds()	設置 Date 對象中的毫秒 (0 ~ 999)。
setTime()	以毫秒設置 Date 對象。
setUTCDate()	根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。
setUTCMonth()	根據世界時設置 Date 對象中的月份 (0 ~ 11)。
setUTCFullYear()	根據世界時設置 Date 對象中的年份（四位數字）。
setUTCHours()	根據世界時設置 Date 對象中的小時 (0 ~ 23)。
setUTCMinutes()	根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。
setUTCSeconds()	根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。
setUTCMilliseconds()	根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。
toSource()	返回該對象的源代碼。
toString()	把 Date 對象轉換為字符串。
toTimeString()	把 Date 對象的時間部分轉換為字符串。
toDateString()	把 Date 對象的日期部分轉換為字符串。
toGMTString()	請使用 toUTCString() 方法代替。
toUTCString()	根據世界時，把 Date 對象轉換為字符串。
toLocaleString()	根據本地時間格式，把 Date 對象轉換為字符串。
toLocaleTimeString()	根據本地時間格式，把 Date 對象的時間部分轉換為字符串。
toLocaleDateString()	根據本地時間格式，把 Date 對象的日期部分轉換為字符串。
UTC()	根據世界時返回 1970 年 1 月 1 日到指定日期的毫秒數。
valueOf()	返回 Date 對象的原始值。

下面對某些常用的方法進行詳細的案例分析：

JavaScript裏的Date 對象屬性及對象方法－－實現簡單的日歷

tor 個數 lin all date rip rec 說明進行上網搜索"js 日歷插件"就會出來各種效果的功能豐富的日歷插件,很多都可以下載源碼,然後根據各自的需求對源碼進行修改就可以直接用了. 但今天講的不是如何使用這些插件,而是講如何實現一個很簡單的只有當前這

比較兩個對象屬性及屬性值

bject ace ive args main authorize code pre cer import java.lang.reflect.Method; private static Object getFieldValue(Object thisClass, St

CSS3景深、三維變換屬性及旋轉三維立方體的實現

場景 htc 學歷 ati light range frame 焦距說道瀏覽器坐標系在講正式語法之前，首先需要了解瀏覽器坐標系這需要我們把瀏覽器界面想象成一個立體的場景這是網上流傳很廣的瀏覽器坐標系圖片從左到右的方向是瀏覽器x軸的正方向從上到下的方向是瀏覽器

利用反射列印物件的所有屬性及呼叫物件方法

利用java反射輸出物件的所有屬性，呼叫物件的方法 public class ClassUtil { private static final Logger logger = LoggerFactory.getLogger(ClassUtil.class); public s

UIScrollView 基本屬性及常用代理方法

- (void)viewDidLoad { [super viewDidLoad]; scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)]; scro

Js中讀取、移除屬性及隱藏元件方法研究

新增、移除元件屬性方法: $(".class名").attr("屬性名","屬性值");//設定指定屬性 $(".class名").attr("屬性名");//讀取指定屬性值 or

淺析JavaScript訪問對象屬性和方法及區別

cti on() 對象方法編寫程序因此 brush new 函數 name 屬性是一個變量，用來表示一個對象的特征，如顏色、大小、重量等；方法是一個函數，用來表示對象的操作，如奔跑、呼吸、跳躍等。在JavaScript中通常使用”."運算符來存取對象的屬性的值。或者使

javascript 對象屬性的添加，刪除，json對象和字符串轉換方法等

star font style strong 字符串轉換定義 obj tarray def 1:動態添加對象屬性 var obj = new Object(); console.log (obj.username); obj.username = "haha"; con

在JavaScript裏的“對象字面量”是什麽意思？

ray 如何變量名 scrip fun string object ring 5% 字面量表示如何表達這個值，一般除去表達式，給變量賦值時，等號右邊都可以認為是字面量。字面量分為字符串字面量(string literal )、數組字面量(array literal)和對象

javascript面向對象屬性函數用法(defineProperty與getOwnPropertyDescriptor)

ghost font 返回 java writable fig pan logs ict defineProperty用於設置一個對象的屬性值和描述符，描述符有4個：[[Configurable]], [[Enumerable]], [[Writable]],[[Value

javascript中Date對象的應用

應用 ntop min == borde 當前 else if i++ section 前面的話　　簡易日歷作為javascript中Date對象的常見應用，用途較廣泛。本文將詳細說明簡易日歷的實現思路效果演示 HTML說明　　使用type=number的

javascript的對象問題及總結

arr prevent 是什麽 basic 所有 type spro dde pan 一 js中的對象是什麽？ -- js的對象是一種無序的數據集合，由若幹鍵值對組成（key-value）組成，裏面包含著數據（屬性）和方法（動作），它可以代表js中的所有事物。 - 例如將

Javascript裏面的時間處理：將時間戳或時間對象轉成字符串格式

local replace lin TP 秒級 ole date() itl -h 　　問題背景：想把一個時間直接轉成字符串格式　　通過查api發現有個toLocaleString()，根據本地時間格式，把 Date 對象轉換為字符串 new Date().toLoca

JavaScript&jQuery.對象.屬性

能夠標識符問題世界 names ace 哪些 space 開車對象對象可以是一個變量，一個數據結構，或是一個函式。是面向對象（Object Oriented）中的術語，既表示客觀世界問題空間（Namespace）中的某個具體的事物，又表示軟件系統解空間中的基本元素

JavaScript&jQuery.Date對象和Time對象

vue 監聽對象及對象屬性或某一個屬性

har log 監聽 vue 聲明 highlight watch 對象 sha 註意：監聽的對象必須已經在data中聲明了 //監聽某個變量 watch: { bet(newValue, oldValue) { console.log(newVa

javascript Location對象屬性和方法

src his 對象屬性 com 協議 () tails log png Location對象　　Location對象包含有關當前URL的信息　　https://blog.csdn.net/u010953692/article/details/80901035#3

javascript判斷兩個對象屬性以及值是否相等

span else ins con else if ret lse for seq objIsEqual(obj1,obj2){//比較兩個對象鍵值對是否相等 var o1 = obj1 instanceof Object;

javascript-object對象屬性操作之Object.defineProperty

終極 {} name屬性 ble -o 常量沒有 tab 是否一、基本用法簡介聲明一個簡單的對象，如下 var obj = { name: ‘ldld‘ } 　我們可以用Object.defineProperty來聲明這個對象

JavaScript設計模式：一、面向對象編程

this 依賴人在 turn obj log javascrip 體會創建 JavaScript面向對象編程眾所周知，JS作為一門腳本語言，由於其設計者在設計JS的時候，也僅僅用了很少的時間就完成了JS這門語言的創建，JS雖然擁有著腳本語言的優勢，但是JS也存在著

JavaScript裏的Date 對象屬性及對象方法－－實現簡單的日歷

Date 對象屬性

Date 對象方法

相關推薦