ฉันรีบไปทำโครงการเมื่อเร็ว ๆ นี้ ในที่สุดโครงการก็อยู่ในสถานะที่มั่นคงในขณะนี้เพียงแค่แก้ไข ในฐานะโปรแกรมเมอร์พื้นหลังฉันยากจริงๆ ฉันต้องเขียนทุกอย่างตั้งแต่เว็บไปจนถึงอินเทอร์เฟซมือถือซึ่งเป็นสิ่งต่าง ๆ มากมาย - - ในที่สุดฉันก็ไม่ได้ใช้งานสองวันนี้ ฉันดูฟังก์ชั่นบางอย่างเกี่ยวกับวันที่ JS และทันใดนั้นก็นึกถึงการควบคุมปฏิทิน ดังนั้นฉันจึงพยายามเขียน ในฐานะโปรแกรมเมอร์พื้นหลังฉันถูก จำกัด ในระดับของฉัน มาดูทัศนคติการเรียนรู้และดูตัวอย่างที่ฉันเขียน - -
ก่อนอื่นฟังก์ชั่นวันที่ที่ใช้กันทั่วไป: วันที่ (ปี, เดือน, วัน)
การคัดลอกรหัสมีดังนี้:
วันที่ var = วันที่ใหม่ ();
รับปี
การคัดลอกรหัสมีดังนี้:
var year = this.date.gredlyear ();
รับเดือนนี่คือดัชนีรายเดือนดังนั้นคุณต้องการ +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);
Date.getDate ();
-
var monthays = 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-allign: center;}
</style>
<script type = "text/javascript">
window.onload = function () {
var calender = function () {
this.init.apply (ข้อโต้แย้งนี้);
-
Calender.prototype = {
init: ฟังก์ชั่น (คอนเทนเนอร์ตัวเลือก) {
this.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 (นี่คือปีนี้ month-1, 1);
this.monthday = this.getMonthdays (this.year, this.month);
this.containerDiv = document.getElementById (คอนเทนเนอร์);
this.options = ตัวเลือก! = null? ตัวเลือก: {
ชายแดน: '1px Solid Green'
ความกว้าง: '400px'
ความสูง: '200px',
BackgroundColor: 'LightGrey'
FontColor: 'Blue'
-
-
getMonthdays: ฟังก์ชั่น (ปี, เดือน) {
วันที่ var = วันที่ใหม่ (ปี, เดือน, 0);
Date.getDate ();
-
GetWeekday: ฟังก์ชั่น (ปี, เดือน, วัน) {
วันที่ var = วันที่ใหม่ (ปี, เดือน, วัน);
วันที่ส่งคืน getDay ();
-
ดู: ฟังก์ชัน () {
var tableSt = '<table>';
tableSt+= '<tr> <td colspan = "3"> </td> <td> ปี:'+this.year+'</td> <td colspan = "3"> เดือน:'+this.month+'</td> </tr>';
tableSt+= '<tr> <td> วัน </td> <td> หนึ่ง </td> <td> สอง </td> <td> สาม </tw </td> <td> ห้า </tw </td> <td> หก </td> </tr>';
ดัชนี var = 1;
// ตัดสินว่าวันแรกของแต่ละเดือนอยู่ที่ไหน
var style = '';
if (this.weekstart <7)
-
tableSt+= '<tr>';
สำหรับ (var i = 0; i <this.weekStart; i ++) {
tableSt+= '<td> </td>';
-
สำหรับ (var i = 0; i <7-this.weekstart; i ++) {
style = this.day == (i+1)? "พื้นหลังสี: สีเขียว;": "";
ดัชนี ++;
tableSt+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';
-
tableSt+= '</tr>';
-
/// ตำแหน่งที่สอดคล้องกับวันที่เหลือ
// ตัดสินแถวจำนวนเต็มและสอดคล้องกับตำแหน่งที่สอดคล้องกัน
var masterdays = 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 ++) {
tableSt+= '<tr>';
สำหรับ (var k = 0; k <7; k ++) {
style = this.day == (index+k)? "พื้นหลังสี: สีเขียว;": "";
tableSt+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(ดัชนี+k))+'>';
tableSt+= ดัชนี+k;
tableSt+= '</td>';
-
tableSt+= '</tr>';
ดัชนี+= 7;
-
// ตำแหน่งที่สอดคล้องกันของวันสุดท้ายที่เหลือ (ไม่สามารถเติมในวันนั้นของสัปดาห์)
var เหลืออยู่ = this.monthdays- (index-1);
tableSt+= '<tr>';
สำหรับ (var i = 0; i <retaincols; i ++) {
style = this.day == ดัชนี? "พื้นหลังสี: สีเขียว;": "";
tableSt+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(index))+'>';
tableSt+= ดัชนี;
tableSt+= '</td>';
ดัชนี ++;
-
tableSt+= '</tr>';
tableSt+= '</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 = 'ตัวชี้';
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.srelement || evt.target;
if (target && target.getAttribute ('val'))
-
การแจ้งเตือน (target.getAttribute ('val'));
-
-
var tableSt = this.view ();
this.tablestr = tablester;
Calendardiv.innerhtml = TableStion;
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 = this;
/// รีเซ็ตพารามิเตอร์
var resetpara = ฟังก์ชั่น (ปี, เดือน, วัน) {
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 (นั่นคือปีที่. month-1, 1);
นั่นวันนั้น = that.getMonthdays (นั่นคือปีที่ผ่านมา);
-
// หน้าก่อนหน้า
var prebtn = document.createElement ('อินพุต');
prebtn.type = 'ปุ่ม';
prebtn.value = '<';
prebtn.onclick = function () {
ที่. containerdiv.removechild (div);
ResetPara (นั่นคือปีที่ 2, 2, that.day);
that.render ();
-
// หน้าถัดไป
var nextbtn = document.createElement ('อินพุต');
nextbtn.type = 'ปุ่ม';
nextbtn.value = '>';
nextbtn.onclick = function () {
ที่. containerdiv.removechild (div);
ResetPara (นั่นคือปีที่ผ่านมาวันนั้นวัน);
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+=
i == นั่นปี
? '<ตัวเลือกค่า = "'+i+'" selected = "true">'+i+'</opovie>'
: '<ตัวเลือกค่า = "'+i+'">'+i+'</potion>';
-
dropdiVstr+= '</select>';
// เลือกเดือน
dropdiVstr+= '<select id = "ddlmonth">';
สำหรับ (var i = 1; i <= 12; i ++) {
dropdiVstr+=
i == ว่าเดือนนั้น
? '<ตัวเลือกค่า = "'+i+'" selected = "true">'+i+'</opovie>'
: '<ตัวเลือกค่า = "'+i+'">'+i+'</potion>';
-
dropdiVstr+= '</select>';
dropdiv.innerhtml = dropdivstr;
Div.AppendChild (Dropdiv);
ที่. 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;
ที่. containerdiv.removechild (div);
ResetPara (ปี, เดือนที่ 1, วันที่);
that.render ();
-
ddlyear.onchange = function () {
ddlchange ();
-
ddlmonth.onchange = function () {
ddlchange ();
-
-
-
var calendar = ใหม่ปฏิทิน ('dvtest', {
ชายแดน: '1px Solid Green'
ความกว้าง: '400px'
ความสูง: '200px',
BackgroundColor: ''
-
-
Calendar.render ();
-
</script>
</head>
<body>
<div id = "dvtest"> </div>
</body>
</html>
รหัสถูกเปลี่ยนอีกครั้งและตารางมุมมองจะถูกแทนที่ด้วย div เพื่อแก้ปัญหาแบบอ่านอย่างเดียวของ TableInnerHtml ของ IE นอกจากนี้ยังมีการเพิ่มตัวเลือกสำหรับการกำหนดค่า
รหัสด้านบนมีคำอธิบายง่ายๆฟังก์ชั่นเป็นพื้นฐานที่สุดและถ้าคุณทำในเชิงลึกมากขึ้นคุณสามารถขยายได้