لقد كنت أهرع للمشاريع مؤخرًا. المشروع أخيرًا في حالة مستقرة الآن ، فقط تنقيحات. كمبرمج للخلفية ، أنا صعب حقًا. يجب أن أكتب كل شيء من الويب إلى واجهة الهاتف المحمول ، وهو الكثير من الأشياء. . . أخيرًا حصلت على خمول هذين اليومين. نظرت إلى بعض الوظائف حول تواريخ JS وفكرت فجأة في التحكم في التقويم. لذلك حاولت كتابة واحدة. كمبرمج للخلفية ، أنا محدود في مستواي. دعونا نتخذ موقفًا تعليميًا وننظر إلى المثال الذي كتبته. . .
أولاً ، وظيفة تاريخ شائعة الاستخدام: التاريخ (السنة ، الشهر ، اليوم)
نسخة الكود كما يلي:
var date = new date () ؛
الحصول على سنة
نسخة الكود كما يلي:
var year = this.date.getlyear () ؛
احصل على شهر ، إليك الفهرس الشهري لذا تحتاج إلى +1
نسخة الكود كما يلي:
var month = this.date.getMonth ()+1 ؛
ما هو تاريخ الاستحواذ
نسخة الكود كما يلي:
var day = this.date.getDate () ؛
احصل على يوم الأسبوع ، عودة 0. الأحد 1. الاثنين 2. الثلاثاء 3. الأربعاء 4. الخميس 5. الجمعة 6. السبت
نسخة الكود كما يلي:
var week = this.date.getDay () ؛
احصل على أي يوم من أيام الأسبوع في ذلك الشهر
نسخة الكود كما يلي:
var getWeekday = function (السنة ، الشهر ، اليوم) {
تاريخ var = تاريخ جديد (السنة ، الشهر ، اليوم) ؛
تاريخ العودة. getDay () ؛
}
var weekstart = getWeekday (this.year ، this.month-1 ، 1)
احصل على عدد الأيام في الشهر
نسخة الكود كما يلي:
var getMonthDays = function (السنة ، الشهر) {
تاريخ var = تاريخ جديد (السنة ، الشهر ، 0) ؛
Return Date.getDate () ؛
}
var monthsdays = this.getMonthDays (this.year ، this.month) ؛
حسنًا ، لقد استخدمنا فقط العديد من المعلمات. فيما يلي في الواقع بعض العمليات والأحكام حول التاريخ المقابل للأسبوع ، علامات الربط الديناميكي. دعنا ننشر مباشرة المثال الذي كتبته:
نسخة الكود كما يلي:
<html>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<head>
<type type = "text/css">
td {text-align: center ؛}
</style>
<script type = "text/javaScript">
window.onload = function () {
var calender = function () {
this.init.apply (هذا ، الحجج) ؛
}
calender.prototype = {
init: وظيفة (حاوية ، خيارات) {
this.date = date new () ؛
this.year = this.date.getlyear () ؛
this.month = this.date.getMonth ()+1 ؛
this.day = this.date.getDate () ؛
this.week = this.date.getday () ؛
this.weekstart = this.getWeekday (this.year ، this.month-1 ، 1) ؛
this.monthDays = this.getMonthDays (this.year ، this.month) ؛
this.containerDiv = document.getElementById (حاوية) ؛
this.options = الخيارات! = خالية؟ الخيارات: {
الحدود: '1 بكسل خضراء صلبة' ،
العرض: '400px' ،
الارتفاع: '200px' ،
BackgroundColor: "Lightgrey" ،
Fontcolor: 'Blue'
}
} ،
GetMonthDays: وظيفة (سنة ، شهر) {
تاريخ var = تاريخ جديد (السنة ، الشهر ، 0) ؛
Return Date.getDate () ؛
} ،
getWeekday: وظيفة (سنة ، شهر ، يوم) {
تاريخ var = تاريخ جديد (السنة ، الشهر ، اليوم) ؛
تاريخ العودة. getDay () ؛
} ،
عرض: function () {
var tablester = '<vide>' ؛
TableStr+= '<tr> <td colspan = "3"> </td> <td> السنة:'+this.year+'</td> <td colspan = "3"> الشهر:'+this.month+'</td> </tr>' ؛
TableStr+= '<tr> <td> Day </td> <td> One </td> <td> اثنان </td> <td> Three </tw </td> <td> خمسة </tw </td> <td> ستة </td> </td> </tr> ؛
فارس فهرس = 1 ؛
// القاضي حيث يكون اليوم الأول من كل شهر
var style = '' ؛
إذا (this.weekstart <7)
{
TableSt+= '<tr>' ؛
لـ (var i = 0 ؛ i <this.weekstart ؛ i ++) {
tablester+= '<td> </td>' ؛
} ؛
لـ (var i = 0 ؛ i <7-this.weekstart ؛ i ++) {
style = this.day == (i+1)؟ "خلفية اللون: الأخضر ؛": "" ؛
فهرس ++ ؛
TableStr+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>' ؛
} ؛
tablester+= '</tr>' ؛
}
/// الموضع المقابل للأيام المتبقية
// القاضي صفوف عدد صحيح ويتوافق مع المواقف المقابلة
var saydays = this.monthdays- (7-this.weekstart) ؛
var row = math.floor (البقاء reydays 7 == 0؟ البقاء/7: ((البقاء/7) +1))) ؛
var count = math.floor (البقاء/7) ؛
لـ (var i = 0 ؛ i <count ؛ i ++) {
TableSt+= '<tr>' ؛
لـ (var k = 0 ؛ k <7 ؛ k ++) {
style = this.day == (index+k)؟ "خلفية اللون: الأخضر ؛": "" ؛
TableStR+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(index+k))+'>' ؛
TableSt+= index+k ؛
tablester+= '</td>' ؛
} ؛
tablester+= '</tr>' ؛
الفهرس+= 7 ؛
} ؛
// الموضع المقابل في الأيام المتبقية الأخيرة (لا يمكن ملء تلك الأيام من الأسبوع)
var saytcols = this.monthDays- (index-1) ؛
TableSt+= '<tr>' ؛
لـ (var i = 0 ؛ i <stayCols ؛ i ++) {
style = this.day == index؟
TableStR+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(index))+'>' ؛
tablester+= فهرس ؛
tablester+= '</td>' ؛
فهرس ++ ؛
} ؛
tablester+= '</tr>' ؛
tablester+= '</table>' ؛
إرجاع Tablestr.
} ،
Render: function () {
var calendardiv = document.createElement ('div') ؛
calendardiv.style.border = this.options.border ؛
calendardiv.style.width = this.options.width ؛
calendardiv.style.height = this.options.height ؛
calendardiv.style.cursor = 'pointer' ؛
calendardiv.style.backgroundColor = this.options.backgroundColor ؛
// calendardiv.style.color = this.options.fontcolor ؛
Calendardiv.Style.Color = 'Red' ؛
calendardiv.onclick = function (e) {
var evt = e || window.event ؛
var target = evt.srcelement || evt.target ؛
إذا (Target && target.getAttribute ('val'))
{
ALERT (target.getAttribute ('val')) ؛
}
}
var tablester = this.view () ؛
this.tablestr = tablester ؛
calendardiv.innerhtml = tableStr ؛
var div = document.createElement ('div') ؛
div.style.width = 'auto' ؛
div.style.height = 'auto' ؛
Div.AppendChild (CalenderDiv) ؛
/// الصفحة Turn Div
var pagerdiv = document.createElement ('div') ؛
pagerdiv.style.width = 'auto' ؛
pagerdiv.style.height = 'auto' ؛
var that = هذا ؛
/// إعادة تعيين المعلمات
var resetpara = function (السنة ، الشهر ، اليوم) {
that.date = تاريخ جديد (السنة ، الشهر ، اليوم) ؛
that.year = that.date.getlyear () ؛
that.month = that.date.getMonth ()+1 ؛
that.day = that.date.getDate () ؛
that.week = that.date.getday () ؛
that.weekstart = that.getWeekday (that.year ، that.month-1 ، 1) ؛
that.monthDays = that.getMonthDays (that.year ، that.month) ؛
}
// الصفحة السابقة
var prebtn = document.createElement ('input') ؛
prebtn.type = 'button' ؛
prebtn.value = '<' ؛
prebtn.onclick = function () {
that.containerdiv.removechild (div) ؛
RESETPARA (that.year ، that.month-2 ، that.day) ؛
that.render () ؛
}
// الصفحة التالية
var nextbtn = document.createElement ('input') ؛
nextBtn.Type = 'button' ؛
nextBtn.Value = '>' ؛
nextBtn.Onclick = function () {
that.containerdiv.removechild (div) ؛
RESETPARA (that.year ، that.month ، that.day) ؛
that.render () ؛
}
pagerdiv.appendchild (prebtn) ؛
Pagerdiv.AppendChild (NextBtn) ؛
Div.AppendChild (Pagerdiv) ؛
var dropdiv = document.createElement ('div') ؛
var dropdivstr = '' ؛
// حدد سنة
dropdivstr+= '<select id = "ddlyear">' ؛
لـ (var i = 1900 ؛ i <= 2100 ؛ i ++) {
dropdivstr+=
أنا == هذا
؟ '<Option Value = "'+i+'" select = "true">'+i+'</point>' '
: '<Option Value = "'+i+'">'+i+'</portion>' ؛
} ؛
dropdivstr+= '</select>' ؛
// حدد شهرًا
dropdivstr+= '<select id = "ddlmonth">' ؛
لـ (var i = 1 ؛ i <= 12 ؛ i ++) {
dropdivstr+=
أنا == that.month
؟ '<Option Value = "'+i+'" select = "true">'+i+'</point>' '
: '<Option Value = "'+i+'">'+i+'</portion>' ؛
} ؛
dropdivstr+= '</select>' ؛
dropdiv.innerhtml = dropdivstr ؛
Div.AppendChild (dropdiv) ؛
that.containerdiv.appendchild (div) ؛
/// ربط الحدث الذي يختار سنة وشهر
var ddlchange = function () {
var ddlyear = document.getElementById ('ddlyear') ؛
var ddlmonth = document.getElementById ('ddlmonth') ؛
var yearIndex = ddlyear.selectedIndex ؛
var year = ddlyear.options [yearIndex] .value ؛
var monthIndex = ddlmonth.SelectedIndex ؛
var month = ddlmonth.options [monthIndex] .value ؛
that.containerdiv.removechild (div) ؛
ResetPara (السنة ، الشهر 1 ، that.day) ؛
that.render () ؛
}
ddlyear.onchange = function () {
ddlchange () ؛
}
ddlmonth.onchange = function () {
ddlchange () ؛
}
}
}
VAR CALENDAR = NEW LALENDER ('DVTEST' ، {
الحدود: '1 بكسل خضراء صلبة' ،
العرض: '400px' ،
الارتفاع: '200px' ،
BackgroundColor: ''
}
) ؛
Calendar.Render () ؛
}
</script>
</head>
<body>
<div id = "dvtest"> </viv>
</body>
</html>
تم تغيير الرمز مرة أخرى واستبدال جدول العرض بـ DIV ، من أجل حل المشكلة للقراءة فقط لـ IE's TableInnerHTML. بالإضافة إلى ذلك ، تتم إضافة الخيارات للتكوين.
يحتوي الرمز أعلاه على شرح بسيط ، والوظيفة هي الأكثر أساسية ، وإذا قمت بذلك أكثر تعمقًا ، فيمكنك توسيعه.