في الآونة الأخيرة ، نظرت إلى بعض الوظائف حول تواريخ 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 (year ، month ، day) {var date = new date (year ، month ، day) ؛ تاريخ العودة. getDay () ؛ } var weekstart = getWeekday (this.year ، this.month-1 ، 1)احصل على عدد الأيام في الشهر
var getMonthDays = function (year ، month) {var date = new date (year ، month ، 0) ؛ Return Date.getDate () ؛ } var monthdays = this.getMonthDays (this.year ، this.month) ؛حسنًا ، لقد استخدمنا فقط العديد من المعلمات. فيما يلي في الواقع بعض العمليات والأحكام حول التاريخ المقابل للأسبوع ، علامات الربط الديناميكي. دعنا ننشر مباشرة المثال الذي كتبته:
صورة التكاثر:
<html> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <head> <style type = "text/css"> td {text-alender: center ؛} </style> <script type/javascript this.init.apply (هذا ، الحجج) ؛ } calender.prototype = {init: function (Container ، Options) {this.date = new date () ؛ 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 = الخيارات! = null؟ الخيارات: {الحدود: '1px solid green' ، العرض: '400px' ، الارتفاع: '200px' ، backgroundcolor: 'lightgrey' ، fontcolor: 'blue'}} ، getMonthDays: function (year ، month) Return Date.getDate () ؛ } ، getWeekday: function (year ، month ، day) {var date = new date (year ، month ، day) ؛ تاريخ العودة. getDay () ؛ } ، view: function () {var tablester = '<table>' ؛ TableStr+= '<tr> <td colspan = "3"> </td> <td> السنة:'+this.year+'</td> <td colspan = "3"> الشهر:'+this.month+'</td> </tr>' ؛ TableStR+= '<tr> <td> day </td> <td> اثنان </td> <td> أربعة </td> <td> Five </td> <td> Six </td> </tr>' ؛ فارس فهرس = 1 ؛ // ugge حيث اليوم الأول من كل شهر هو var style = '' ؛ if (this.weekstart <7) {tablept+= '<tr>' ؛ لـ (var i = 0 ؛ i <this.weekstart ؛ i ++) {tablept+= '<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>' ؛ } /// الموضع المقابل للأيام المتبقية // الحكم على صف عدد صحيح ويتوافق مع الموضع المقابل VARAYSDays = this.monthdays- (7-this.weekstart) ؛ var row = Math.floor (البقاء ٪ 7 == 0؟ البقاء/7: ((البقاء/7) +1)) ؛ var count = math.floor (البقاء/7) ؛ لـ (var i = 0 ؛ i <count ؛ i ++) {tablept+= '<tr>' ؛ لـ (var k = 0 ؛ k <7 ؛ k ++) {style = this.day == (index+k)؟ tablester+= '<td style = "' '+style+'" "val = '+(this.year+'-'+this.month+'-'+(index+k))+'> '؛ tablester+= index+k ؛ tablestr+=' </td> '؛ staycols = this.monthdays- (index-1) ؛ 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 ؛ if (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) ؛ /// page 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 = '' ؛ // SELECT YEAR DROPDIVSTR+= '<select id = "ddlyear">' ؛ لـ (var i = 1900 ؛ i <= 2100 ؛ i ++) {dropdivstr+= i == that.year؟ } ؛ dropdivstr+= '</select>' ؛ // حدد شهر dropdivstr+= '<select id = "ddlmonth">' ؛ لـ (var i = 1 ؛ i <= 12 ؛ i ++) {dropdivstr+= i == that.month؟ '<option value = "'+i+'" select = "true">'+i+'</potion>': '<option value = "'+i+'" " } ؛ 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 ، Th.day) ؛ that.render () ؛ } ddlyear.onchange = function () {ddLchange () ؛ } ddlmonth.onchange = function () {ddLchange () ؛ }}} var calendar = new Calender ('dvtest' ، {border: '1px solid green' ، width: '400px' ، height: '200px' ، backgroundColor: ''}) ؛ Calendar.Render () ؛ } </script> </head> <body> <div id = "dvtest"> </viv> </body> </html>تم تغيير الرمز مرة أخرى واستبدال جدول العرض بـ DIV ، من أجل حل المشكلة للقراءة فقط لـ IE's TableInnerHTML. بالإضافة إلى ذلك ، تتم إضافة الخيارات للتكوين.
الرمز أعلاه له تفسير بسيط ، والوظائف هي الأكثر أساسية. إذا قمت بذلك بعمق ، فيمكنك توسيعه. آمل أن يعطيك هذا المقال بعض الإلهام.