找回密码
当前位置：前端开发者 > 未分类 > 正文

基于javascript的日历

2018-11-14 22:44:14 分类：未分类 阅读(113) 评论(0)
atom 前端开发必装插件
前端开发的所有插件
eclipse前端开发 插件及说明

基于javascript的日历，支持本机电脑时间和服务器时间，第二个参数可选，[年,月,日,时,分,秒]
//发现了bug，解决一下
日历

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <style>
            .calender {
                width: 436px;
                height: 270px;
            }
            .calender-statusBar {
                position: relative;
                width: 100%;
                height: 38px;
                font: 15px ‘microsoft yahei’;
                background-color: rgb(69, 127, 191);
                color: rgb(255, 255, 255);
            }
            .calender-time,
            .calender-dateChoice-lastMonth,
            .calender-date,
            .calender-dateChoice-nextMonth {
                position: absolute;
            }
            .calender-time {
                top: 8px;
                left: 10px;
                font-weight: normal;
            }
            .calender-dateChoice-lastMonth,
            .calender-dateChoice-nextMonth {
                top: 14px;
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
            }
            .calender-dateChoice-lastMonth {
                right: 200px;
                border-right: 10px solid rgb(255, 255, 255);
            }
            .calender-dateChoice-nextMonth {
                right: 85px;
                border-left: 10px solid rgb(255, 255, 255);
            }
            .calender-date {
                width: 106px;
                right: 94px;
                top: 8px;
                text-align: center;
            }
            .calender-dateBox {
                position: relative;
                border-bottom: rgb(195, 195, 195) dashed 1px;
                margin: 0 auto;
                width: 394px;
                height: 268px;
            }
            .calender-week,
            .calender-weekBox {
                margin: 0;
                padding: 0;
                *zoom: 1;
            }
            .calender-week:after,
            .calender-weekBox:after {
                content: ‘\200B’;
                display: block;
                height: 0;
                clear: both;
            }
            .calender-week li,
            .calender-weekBox li {
                list-style: none;
                float: left;
                margin-left: 15px;
                margin-right: 15px;
                font-weight: bold;
                width: 25px;
                height: 25px;
                line-height: 25px;
                text-align: center;
            }
            .calender-week {
                border-bottom: rgb(196, 196, 196) solid 2px;
            }
            .calender-week li {
                margin-top: 4px;
                font: 15px simsun;
                font-weight: bold;
                color: rgb(75, 88, 130);
            }
            .calender-weekBox {
                position: absolute;
                top: 32px;
                left: 0;
                width: 100%;
                font: 14px arial;
            }
            .calender-weekBox li {
                margin-top: 7px;
                margin-bottom: 7px;
                color: rgb(95, 93, 98);
            }
            .calender-weekBox li.calender-today {
                border-radius: 20px;
                background-color: rgb(119, 183, 109);
                color: rgb(255, 255, 255);
            }
            .calender-weekBox li.calender-lastOrNext {
                color: rgb(205, 205, 205);
            }
        </style>
    </head>
    <body>
        <div class=”calender” id=”calender”>
            <div class=”calender-statusBar”>
                <b class=”calender-time”><span></span><span></span></b>
                <span class=”calender-date”></span>
                <span class=”calender-dateChoice-lastMonth”></span>
                <span class=”calender-dateChoice-nextMonth”></span>
            </div>
            <div class=”calender-dateBox”>
                <ul class=”calender-week”>
                    <li>日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                </ul>
                <ol class=”calender-weekBox”></ol>
            </div>
        </div>
        <script>
            function Class_Calender(id, dayArray) {
                //dayArray：可选，数组，[年、月、日、时、分、秒](月:1~12)
                var _self = this
                this.calenderId = document.getElementById(id)
                this.GetNodes = function() {
                    //获取各个节点
                    var span = _self.calenderId.getElementsByTagName(‘span’)
                    _self.cTime = span[0] //时间
                    _self.cDay = span[1] //日期
                    _self.cDate = span[2] //年月
                    _self.choiceLastMonth = span[3] //上一月
                    _self.choiceNextMonth = span[4] //下一月
                    _self.weekBox = _self.calenderId.getElementsByTagName(
                        ‘ol’,
                    )[0] //日历box
                }
                this.GetTimes = function() {
                    //获取当前日期,年、月、日、时、分、秒、周
                    if (dayArray) {
                        //传进来时间数组
                        _self.dayArray = dayArray
                        _self.dayArray[1] = _self.dayArray[1] – 1
                        var d = _self.GetDay(
                            _self.dayArray[0],
                            _self.dayArray[1],
                            _self.dayArray[2],
                        )
                        _self.dayArray.push(d)
                    } else {
                        //使用电脑的本地时间
                        var myDate = new Date()
                        _self.dayArray = [
                            myDate.getFullYear(),
                            myDate.getMonth(),
                            myDate.getDate(),
                            myDate.getHours(),
                            myDate.getMinutes(),
                            myDate.getSeconds(),
                            myDate.getDay(),
                        ]
                    }
                    _self.nowDisplay = [_self.dayArray[0], _self.dayArray[1]] //当前显示的年月
                }
                this.AddZero = function(x) {
                    //对于小于10的十位用0补齐
                    var num
                    if (x >= 0 && x <= 9) {
                        num = ‘0’ + x
                    } else {
                        num = x
                    }
                    return num
                }
                this.GetDay = function(a, b, c) {
                    //获取是周几
                    var myDate = new Date(a, b, c)
                    return myDate.getDay()
                }
                this.TransformationDay = function(x) {
                    //转换成日期
                    var d
                    switch (x) {
                        case 0:
                            d = ‘[星期日]’
                            break
                        case 1:
                            d = ‘[星期一]’
                            break
                        case 2:
                            d = ‘[星期二]’
                            break
                        case 3:
                            d = ‘[星期三]’
                            break
                        case 4:
                            d = ‘[星期四]’
                            break
                        case 5:
                            d = ‘[星期五]’
                            break
                        case 6:
                            d = ‘[星期六]’
                            break
                    }
                    ;<br />
                    return d
                }
                this.LeapYearOrNo = function(y) {
                    //计算平年还是闰年的2月份的天数
                    var r
                    ;(y % 4 == 0 && y % 100 != 0) || y % 400 == 0
                        ? (r = 29)
                        : (r = 28)
                    return r
                }
                this.ThisMonthDays = function(y, m) {
                    //计算该月有多少天
                    var t
                    switch (m) {
                        case 0:
                        case 2:
                        case 4:
                        case 6:
                        case 7:
                        case 9:
                        case 11:
                            t = 31
                            break
                        case 1:
                            t = _self.LeapYearOrNo(y)
                            break
                        default:
                            t = 30
                            break
                    }
                    ;<br />
                    return t
                }
                this.CalculationDay = function(x) {
                    //改变星期
                    var d = _self.TransformationDay(x)
                    _self.cDay.innerHTML = d
                }
                this.CalculationTime = function() {
                    //时间
                    function InnerTime() {
                        _self.cTime.innerHTML =
                            _self.AddZero(_self.dayArray[3]) +
                            ‘:’ +
                            _self.AddZero(_self.dayArray[4]) +
                            ‘:’ +
                            _self.AddZero(_self.dayArray[5])
                    }
                    function CTime() {
                        if (_self.dayArray[5] == 59) {
                            //秒
                            _self.dayArray[5] = 0
                            if (_self.dayArray[4] == 59) {
                                //分
                                _self.dayArray[4] = 0
                                if (_self.dayArray[3] == 23) {
                                    //时
                                    _self.dayArray[3] = 0
                                    _self.ChangeToday()
                                } else {
                                    _self.dayArray[3]++
                                }
                            } else {
                                _self.dayArray[4]++
                            }
                        } else {
                            _self.dayArray[5]++
                        }
                        InnerTime()
                    }
                    InnerTime()
                    var timeSet = setInterval(CTime, 1000)
                }
                this.ChangeToday = function() {
                    //改变日期
                    function NewDay() {
                        if (
                            _self.ThisMonthDays(
                                _self.dayArray[0],
                                _self.dayArray[1],
                            ) == _self.dayArray[2]
                        ) {
                            //月末
                            _self.dayArray[2] = 1
                            if (_self.dayArray[1] == 11) {
                                //年末
                                _self.dayArray[1] = 0
                                _self.dayArray[0]++
                            } else {
                                _self.dayArray[1]++
                            }
                        } else {
                            _self.dayArray[2]++
                        }
                    }
                    if (
                        _self.nowDisplay[0] == _self.dayArray[0] &&
                        _self.nowDisplay[1] == _self.dayArray[1]
                    ) {
                        //判断当前显示的日历是否是当前年月
                        NewDay() //是的话改变
                        _self.nowDisplay[0] = _self.dayArray[0]
                        _self.nowDisplay[1] = _self.dayArray[1]
                        _self.ChangeCalender(
                            _self.dayArray[0],
                            _self.dayArray[1],
                            _self.dayArray[2],
                        )
                    } else {
                        //不是的话不改变
                        NewDay()
                    }
                    _self.dayArray[6] = _self.GetDay(
                        _self.dayArray[0],
                        _self.dayArray[1],
                        _self.dayArray[2],
                    ) //改变星期几
                    _self.CalculationDay(_self.dayArray[6])
                }
                this.clickLastMonth = function(event) {
                    if (_self.nowDisplay[1] == 0) {
                        _self.nowDisplay[1] = 11
                        _self.nowDisplay[0]–
                    } else {
                        _self.nowDisplay[1]–
                    }
                    _self.ChangeCalender(
                        _self.nowDisplay[0],
                        _self.nowDisplay[1],
                    )
                }
                this.clickNextMonth = function(event) {
                    if (_self.nowDisplay[1] == 11) {
                        _self.nowDisplay[1] = 0
                        _self.nowDisplay[0]++
                    } else {
                        _self.nowDisplay[1]++
                    }
                    _self.ChangeCalender(
                        _self.nowDisplay[0],
                        _self.nowDisplay[1],
                    )
                }
                this.ChangeCalender = function(year, month, day) {
                    var txt = ”
                    var last = [] //0：年，1：月
                    if (month == 0) {
                        last.push(year – 1)
                        last.push(11)
                    } else {
                        last.push(year)
                        last.push(month – 1)
                    }
                    var lastMonthDays = _self.ThisMonthDays(last[0], last[1]), //上一个月一共多少天
                        thisMonthDays = _self.ThisMonthDays(year, month) //这个月一共多少天
                    var m = _self.GetDay(year, month, 1)
                    m == 0 ? (m = 7) : m
                    var s = m – 1,
                        u = lastMonthDays – s,
                        p = thisMonthDays + s,
                        i = 1,
                        e = 1
                    for (var length = 0; length < 42; length++) {
                        if (length < m) {
                            txt +=
                                ‘<li class=”calender-lastOrNext”>’ + u + ‘</li>’
                            u++
                        } else if (length >= m && length <= p) {
                            txt += ‘<li>’ + i + ‘</li>’
                            i++
                        } else if (length > p) {
                            txt +=
                                ‘<li class=”calender-lastOrNext”>’ + e + ‘</li>’
                            e++
                        }
                    }
                    _self.weekBox.innerHTML = txt
                    _self.cDate.innerHTML =
                        _self.nowDisplay[0] +
                        ‘&nbsp;’ +
                        _self.AddZero(_self.nowDisplay[1] + 1) +
                        ‘月’
                    ;(function() {
                        if (
                            _self.nowDisplay[0] == _self.dayArray[0] &&
                            _self.nowDisplay[1] == _self.dayArray[1]
                        ) {
                            //当前显示的年月和真实的年月对上的时候
                            var tday = day ? day : _self.dayArray[2]
                            var li = _self.weekBox.getElementsByTagName(‘li’)
                            li[m + tday – 1].className = ‘calender-today’
                        }
                    })()
                }
                this.init = (function() {
                    _self.GetNodes()
                    _self.GetTimes()
                    _self.CalculationTime()
                    _self.CalculationDay(_self.dayArray[6])
                    _self.ChangeCalender(
                        _self.dayArray[0],
                        _self.dayArray[1],
                        _self.dayArray[2],
                    )
                    if (window.addEventListener) {
                        _self.choiceLastMonth.addEventListener(
                            ‘click’,
                            _self.clickLastMonth,
                            false,
                        )
                        _self.choiceNextMonth.addEventListener(
                            ‘click’,
                            _self.clickNextMonth,
                            false,
                        )
                    } else {
                        _self.choiceLastMonth.attachEvent(
                            ‘onclick’,
                            _self.clickLastMonth,
                        )
                        _self.choiceNextMonth.attachEvent(
                            ‘onclick’,
                            _self.clickNextMonth,
                        )
                    }
                })()
            }
        </script>
        <script>
            var calender = new Class_Calender(‘calender’)
        </script>
    </body>
</html>
前端 chrome 开发插件
前端开发调用本地摄像头的插件
谷歌 开发插件 前端
» 本文来自：前端开发者 » 《基于javascript的日历》
» 本文链接地址：https://www.rokub.com/6436.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论