masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > 又一日历输入效果没考虑兼容性，IE通过_时间日期

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

WBOY

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

asal

1068 orang telah melayarinya

<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++;
    }*/

Label berkaitan：

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

sumber：php.cn

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

3

2236

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2377

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1987

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1874

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1944

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan