js寫乙個定製日曆

2021-08-16 00:16:45 字數 2214 閱讀 4383

老早之前寫過乙個js日曆的方法,但是和dom耦合太強,並且邏輯複雜化,在原來的基礎上進行了優化,重寫了日曆方法。

效果圖如下,dom結構為乙個div,裡面包含了 7*6=42 個元素,左浮動排列

原始碼如下:

/*

* 日曆控制項

var dw = new dateweek(),

dt = new date();

dw.setdate(dt.getfullyear(),dt.getmonth()-0+1);

var list = dw.getdaylist(bool); //bool:true,自適應長度,會刪除首/尾不是當月的一周。bool:false,固定7行*6列=42條資料

list = [

...]*/

(function(window),

getweek: function(y, m, d)

}/*根據日期計算星期的公式*/

wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7;

//0對應星期天,1對應星期一

return parseint(wk);

},getname: function(year,month,day),

getprev: function(y,m);

}else;}},

getnext: function(y,m);

}else;

};},

setday: function(date,day,siblings))

},clear: function(),

setdate: function(year, month)

//this.clear();

var name = null,

index = 0,

year = parseint(year),

month = parseint(month),

daytotal = this.getday(year, month),

weekfirst = this.getweek(year,month,1),

weeklast = this.getweek(year,month,daytotal);

//上月的資料

var prev = this.getprev(year, month),

prevdate = prev.d - weekfirst + 1;

for (var i=0; i=1; i--,len--)

}if (count==7) }}

return list;

},init: function();

this.daylist = ;

this.maxlen = 42;

return this;}}

function dateweek();

dateweek.prototype = proto;

dateweek.prototype.constructor = dateweek;

window.dateweek = dateweek;

})(window);

使用方法:

var dw = new dateweek(),

dt = new date();

dw.setdate(dt.getfullyear(), +dt.getmonth()+1);

var list = dw.getdaylist(1); 

list的資料格式如下,

day:25,25號

siblings:true,不是當月的日。當前檢視的是3月的日曆,那麼2月和4月的siblings都會true,用於區分本月

week:星期。對應關係:0-星期日,1星期一,2星期二。。。

得到了日曆的list,剩下的就容易了。

getdaylist(bool)方法,傳入乙個bool值,為true,則去掉不包含當月的乙個星期的資料:

如何自己寫乙個日曆

在很多 都有自己的乙個日曆工具,有些看起來挺酷的,肯定有很多人想學.但在這裡我不是要寫乙個,而是給出它的設計過程,即它的靈魂.第一步 首先我們要選擇要顯示的年份和月份.第二步 獲得這個月的最大天數 參照前面一篇文章 第三步 建立乙個日期物件,這個日期物件為這個月的第一天.第四步 得到這個日期物件的星...

js寫乙個外掛程式

分號開頭,用於防止 壓縮合併時與其它 混在一起造成語法錯誤 而事實證明,uglify壓縮工具會將無意義的前置分號去掉,我只是習慣了這麼寫 function 立即執行函式,閉包,避免汙染全域性變數 通常乙個外掛程式只暴露乙個變數給全域性供其它程式呼叫 還有其它寫法,運算子 函式體 括號 例 funct...

收藏的乙個js日曆控制項

收藏的乙個js日曆控制項 setday.js function cnverycalendar if y 100 0 return 29 generate codes this.generatecalendartable function loop each days in current month...