Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > 又一日历输入效果没考虑兼容性，IE通过_时间日期

又一日历输入效果没考虑兼容性，IE通过_时间日期

WBOY

Freigeben： 2016-05-16 19:19:21

Original

1068 Leute haben es durchsucht

<script>

onload = function() 
{ 
    var panel = new SelectPanel; 
    var rili = new Kalendar; 
    panel.Create(); 
    rili.Create(panel); 
    panel.Apply(document.form1.a); 
    panel.Apply(document.form1.b); 
} 
</script> 
<form name="form1"> 
<input name="a" readonly> 
<input name="b" readonly> 
</form>

<script> 
/* 日历选择类 
this.Width = 0;                             // 设置日历宽度，为零时不指定宽度。 
this.Height = 0;                            // 设置日历高度，为零时不指定高度。 
this.BorderColor = "#1095c6";               // 设置日历边框颜色。 
this.BackColor = "white";                   // 设置日历背景颜色。 
this.CapBack = "#d9ebfe";                   // 设置日历深色。 
this.Tag = doc.createElement("table");      // 日历DOM节点。 
this.Create = function(container)           // 将日历绑定到指定对象。 
*/ 
function Kalendar(win) 
{ 
    if(!win) win = self; 
    var doc = win.document; 
    var _Kalendar = this; 
    this.Width = 0; 
    this.Height = 0; 
    this.BorderColor = "#1095c6"; 
    this.BackColor = "white"; 
    this.CapBack = "#d9ebfe"; 
    this.Tag = doc.createElement("table"); 
    this.Tag.style.cursor = "default"; 
    this.Create = function(container) 
    { 
        if(!container) container = doc.body; 
        this.Parent = container; 
        this.Tag.style.borderCollapse = "collapse"; 
        this.Tag.border = 1; 
        this.Tag.borderColor = this.BorderColor; 
        this.Tag.width = this.Width ? this.Width : ""; 
        this.Tag.height = this.Height ? this.Height : ""; 
        this.Tag.rows[0].cells[0].bgColor = this.CapBack; 
        (container.Tag || container).appendChild(this.Tag); 
        BuildDateFace(new Date(sltNian.value, sltYue.value)); 
    } 
    var today = new Date; 
    var tr = this.Tag.insertRow(); tr.insertCell(); 
    var sltNian = doc.createElement("select"); 
    sltNian.options.add(new Option(today.getFullYear() + "年", today.getFullYear())); 
    InitYearSelect(); 
    function InitYearSelect() 
    { 
        while(sltNian.selectedIndex < 10) 
            sltNian.options.add(new Option(sltNian.options[0].value - 1 + "年", sltNian.options[0].value - 1), 0); 
        while(sltNian.options.length < sltNian.selectedIndex + 11) 
            sltNian.options.add(new Option(sltNian.lastChild.value - 0 + 1 + "年", sltNian.lastChild.value - 0 + 1)); 
    } 
    var sltYue = sltNian.cloneNode(); 
    for(var i = 0; i < 12;) 
    { 
        var opt = new Option(++i + "月", i-1); 
        sltYue.options.add(opt); 
    } 
    sltYue.onchange = function() 
    { 
        BuildDateFace(new Date(sltNian.value, sltYue.value)); 
    } 
    sltNian.onchange = function() 
    { 
        sltYue.onchange(); 
        InitYearSelect(); 
    } 
    sltYue.value = today.getMonth(); 
    sltNian.value = today.getFullYear(); 
    tr.cells[0].appendChild(sltNian); 
    tr.cells[0].appendChild(sltYue); 
    tr.cells[0].colSpan = 7; 
    tr.cells[0].align = "center"; 
    var tBody = this.Tag.tBodies[0]; 
    tBody.insertRow(); 
    for(var i = 0; i < 7; i++) 
    { 
        var td = tBody.rows[1].insertCell(); 
        td.align = "center"; 
        td.appendChild(doc.createTextNode("日一二三四五六".charAt(i))); 
    } 
    tBody.rows[1].cells[0].style.color = "red"; 
    tBody.rows[1].cells[6].style.color = "green"; 
    for(var i = 0; i < 6; i++) 
    { 
        var row = tBody.rows[1].cloneNode(true); 
        tBody.appendChild(row); 
        IRow.apply(row); 
    } 
    tBody.rows[7].deleteCell(); 
    tBody.rows[7].cells[5].colSpan = 2; 
    tBody.rows[7].cells[5].lastChild.data = "清空"; 
    tBody.rows[1].style.fontWeight = "bold"; 
    function IRow() 
    { 
        for(var i = 0; i < this.cells.length; i++) 
        { 
            this.cells[i].onmouseover = function() 
            { 
                if(!IsToday(this.title)) this.bgColor = _Kalendar.CapBack; 
            } 
            this.cells[i].onmouseout = function() 
            { 
                if(!IsToday(this.title)) this.bgColor = ""; 
            } 
            this.cells[i].onclick = function() 
            { 
                _Kalendar.Parent.Owner.value = this.title; 
                _Kalendar.Parent.Tag.style.display = "none"; 
            } 
        } 
    } 
    function IsToday(date) 
    { 
        date = date.split("-"); 
        var year = parseInt(date[0]); 
        var month = parseInt(date[1], 10) - 1; 
        date = parseInt(date[2], 10); 
        return today.getFullYear() == year && 
            today.getMonth() == month && 
            today.getDate() == date; 
    } 
    function BuildDateFace(date) 
    { 
        date.setDate(1); 
        var year = date.getFullYear(); 
        var month = date.getMonth(); 
        var offset = date.getDay(); 
        var maxDate = GetDates(year, month); 
        for(var i = 0; i < maxDate; i++) 
        { 
            var td = _Kalendar.Tag.cells[i + 8 + offset]; 
            td.lastChild.data = i + 1; 
            td.title = [year, (month < 9 ? "0" : "") + (month + 1), (i < 9 ? "0" : "") + (i + 1)].join("-"); 
            td.bgColor = (IsToday(td.title)) ? _Kalendar.CapBack : ""; 
            td.disabled = false; 
        } 
        for(var i = 8 + offset + maxDate; i < _Kalendar.Tag.cells.length - 1; i++) 
        { 
            var td = _Kalendar.Tag.cells[i]; 
            td.title = ""; 
            td.lastChild.data = i - 7 - offset - maxDate; 
            td.disabled = true; 
        } 
        lastMonth = GetDates(year, month - 1); 
        while(offset) 
        { 
            var td = _Kalendar.Tag.cells[8 + (--offset)]; 
            td.title = ""; 
            td.lastChild.data = lastMonth - date.getDay() + offset + 1; 
            td.disabled = true; 
        } 
    } 
    function GetDates(year, month) 
    { 
        if(month < 0) 
        { 
            month = 11; 
            year--; 
        } 
        if(month == 12) 
        { 
            month = 0; 
            year++; 
        } 
        var date = new Date(year, month, 31); 
        return 31 - date.getDate() || 31; 
    } 
} 
/* 选择面板类 
this.Tag = doc.createElement("div");    // 面板HTML标签 
this.Owner = null;                      // 面板对应的输入框。 
this.Width = 0;                         // 宽度，为0时自适应 
this.Height = 0;                        // 面板高度，为0时自适应 
this.BorderColor = "#1095c6";           // 边框颜色 
this.BgColor = "white";                 // 面板背景颜色 
this.Create(container)                  // 将面板创建到container内 
this.Apply(target)                      // 将面板应用到目标控件。 
*/ 
function SelectPanel(win) 
{ 
    if(!win) win = self; 
    var doc = win.document; 
    var _SelectPannel = this; 
    this.Owner = null; 
    this.Tag = doc.createElement("div"); 
    this.Width = 0; 
    this.Height = 0; 
    this.BorderColor = "#1095c6"; 
    this.BgColor = "white"; 
    IMouseEvent.apply(this.Tag); 
    if(!win._PannelList) win._PannelList = [this]; 
    else win._PannelList.push(this); 
    if(!doc.onmousedown) doc.onmousedown = function() 
    { 
        for(var i in win._PannelList) 
        { 
            if(!win._PannelList[i].AllowShow && 
                win._PannelList[i].Tag.style.display != "none" && 
                doc.activeElement.tagName != "SELECT") 
                win._PannelList[i].Tag.style.display = "none"; 
        } 
    } 
    this.Create = function(container) 
    { 
        var style = this.Tag.style; 
        if(this.Width) style.width = this.Width; 
        if(this.Height) style.height = this.Height; 
        style.backgroundColor = this.BgColor; 
        style.border = "1px solid " + this.BorderColor; 
        style.position = "absolute"; 
        style.left = "0px"; 
        style.top = "0px"; 
        style.overflow = "auto"; 
        style.display = "none"; 
        (container || doc.body).appendChild(this.Tag); 
    } 
    this.Apply = function(target) 
    { 
        target.onclick = function() 
        { 
            _SelectPannel.Owner = this; 
            IMouseEvent.apply(target); 
            var x = target.offsetLeft; 
            var y = target.offsetTop + target.offsetHeight + 1; 
            var sender = target; 
            while(sender.offsetParent) 
            { 
                sender = sender.offsetParent; 
                x += sender.offsetLeft; 
                y += sender.offsetTop; 
            } 
            _SelectPannel.Tag.style.left = x + "px"; 
            _SelectPannel.Tag.style.top = y + "px"; 
            _SelectPannel.Tag.style.display = "block"; 
        } 
    } 
    function IMouseEvent() 
    { 
        this.onmouseenter = function() 
        { 
            _SelectPannel.AllowShow = true; 
        } 
        this.onmouseleave = function() 
        { 
            _SelectPannel.AllowShow = false; 
        } 
    } 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

做得比较急，所以没考虑兼容性。
通过两个类实现，一个是面板类，一个是日历类。
由于我开发时所有公共js都是在顶级窗口一次加载的，所以在子窗口创建对象时需要把当前窗口对象传进去，例如： var panel = new parent.parent.SelectPanel(self);如果没传self参数，默认就是加载js的窗口。

marcian 在网上找的那个公历算法有点复杂，呵呵。我获取当前月最大天数，以及当前月第一天是星期几是直接通过JS自带的Date函数来实现的。

复制代码代码如下:

// 获取当月最大天数 
//asfman提供更简单的方式：return (new Date(y, m+1, 0)).getDate() 
function GetDates(year, month) 
{ 
    var date = new Date(year, month, 31); 
    return 31 - date.getDate() || 31; 
} 
// 获取当月第一天是星期几 
function GetFirstDay(year, month) 
{ 
    return (new Date(year, month, 1)).getDay(); 
}  

/* 下面这部分可以不要，因为即使出现new Date(2007, -1, 31)，这种现象，Date会自动转换成Date(2006, 12, 31)
    if(month     {
        month = 11;
        year--;
    }
    if(month == 12)
    {
        month = 0;
        year++;
    }*/

Verwandte Etiketten：

又一日历输入效果没考虑兼容性，IE通过

Quelle：php.cn

Vorheriger Artikel：如何用javascript去掉字符串里的所有空格_javascript技巧 Nächster Artikel：无聊，写了个日历程序，欢迎拍砖_时间日期

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2238

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2378

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1988

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1875

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1947

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage