日曆代碼

時間 2019-12-01

標籤日曆代碼简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color:#96CECF;
        }
        #calendar td{
            width:20px;
            height:20px;
            font-size:12px;
            line-height:20px;
            text-align:center;
        }
        #calendar thead td{
            background-color:#FCC;
            color:#000;
        }
        #calendar tbody td{
            background-color:#fff;
            color:#96CECF;
        }
        #calendar tbody td.none{
            background-color:transparent;
        }
        #calendar tbody td.today{
            color:red;
            font-weight:bold;
        }
        select{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <div id='select'>
            <select id='s_year'>
                <option></option>
            </select>
            <select id='s_month'>
                <option></option>
            </select>
        </div>
        <table id='calendar'>
            <thead>
                <tr>
                    <td>日</td>
                    <td>一</td>
                    <td>二</td>
                    <td>三</td>
                    <td>四</td>
                    <td>五</td>
                    <td>六</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script src="jquery-2.2.1.min.js"></script>
    <script>
        function do_canlendar(d,y,m){
            $('#calendar').each(function(){
                var $this = $(this);
                $('tbody',$this).html('<tr></tr>');
                $('tbody tr:last').append('<td class=’none’ colspan='+first()+'></td>');
                var j = first()-1;
                for(var i=0;i<maxDay();i++){
                    if(j<6){
                        $('tbody tr:last').append('<td>'+(i+1)+'</td>');
                        j++;
                    }else if(j==6){
                        $('tbody').append('<tr></tr>');
                        $('tbody tr:last').append('<td>'+(i+1)+'</td>');
                        j=0;
                    }
                }
                if(y==year&&m==month){
                    $('tbody td').eq(date).addClass('today');
                }
            })
            function first(){
                d.setYear(y);
                d.setMonth(m-1);
                d.setDate(1);
                return d.getDay();
            }
            function maxDay(){
                return new Date(y,m,0).getDate();
            }
        }

        //這一段是製做日曆的片斷。利用這個函數，就能夠爲所欲爲的製做想要的日曆效果。

        //下面這段就是利用這個函數，來達到我想要的效果。

        var d = new Date();
        var date = d.getDate();
        var year = d.getFullYear();
        var month = d.getMonth()+1;
        var week = d.getDay();
        do_canlendar(d,year,month);

        set_option($('#select #s_year'),1980,year);
        set_option($('#select #s_month'),1,12);
        $('#select #s_year').val(year);
        $('#select #s_month').val(month);
        $('#select').change(function(){
            var s_y = $('#select #s_year').val();
            var s_m = $('#select #s_month').val();
            do_canlendar(d,s_y,s_m);
        })

        function set_option(obj,Min,Max) {
            obj.html('<option></option>');
            for (var i = Min; i <= Max; i++) {
                obj.append('<option>' + i + '</option>');
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        body{            background-color:#96CECF;        }        #calendar td{            width:20px;            height:20px;            font-size:12px;            line-height:20px;            text-align:center;        }        #calendar thead td{            background-color:#FCC;            color:#000;        }        #calendar tbody td{            background-color:#fff;            color:#96CECF;        }        #calendar tbody td.none{            background-color:transparent;        }        #calendar tbody td.today{            color:red;            font-weight:bold;        }        select{            border:1px solid #ccc;        }    </style></head><body>    <div>        <div id='select'>            <select id='s_year'>                <option></option>            </select>            <select id='s_month'>                <option></option>            </select>        </div>        <table id='calendar'>            <thead>                <tr>                    <td>日</td>                    <td>一</td>                    <td>二</td>                    <td>三</td>                    <td>四</td>                    <td>五</td>                    <td>六</td>                </tr>            </thead>            <tbody>            </tbody>        </table>    </div>    <script src="jquery-2.2.1.min.js"></script>    <script>        function do_canlendar(d,y,m){            $('#calendar').each(function(){                var $this = $(this);                $('tbody',$this).html('<tr></tr>');                $('tbody tr:last').append('<td class=’none’ colspan='+first()+'></td>');                var j = first()-1;                for(var i=0;i<maxDay();i++){                    if(j<6){                        $('tbody tr:last').append('<td>'+(i+1)+'</td>');                        j++;                    }else if(j==6){                        $('tbody').append('<tr></tr>');                        $('tbody tr:last').append('<td>'+(i+1)+'</td>');                        j=0;                    }                }                if(y==year&&m==month){                    $('tbody td').eq(date).addClass('today');                }            })            function first(){                d.setYear(y);                d.setMonth(m-1);                d.setDate(1);                return d.getDay();            }            function maxDay(){                return new Date(y,m,0).getDate();            }        }        //這一段是製做日曆的片斷。利用這個函數，就能夠爲所欲爲的製做想要的日曆效果。        //下面這段就是利用這個函數，來達到我想要的效果。        var d = new Date();        var date = d.getDate();        var year = d.getFullYear();        var month = d.getMonth()+1;        var week = d.getDay();        do_canlendar(d,year,month);        set_option($('#select #s_year'),1980,year);        set_option($('#select #s_month'),1,12);        $('#select #s_year').val(year);        $('#select #s_month').val(month);        $('#select').change(function(){            var s_y = $('#select #s_year').val();            var s_m = $('#select #s_month').val();            do_canlendar(d,s_y,s_m);        })        function set_option(obj,Min,Max) {            obj.html('<option></option>');            for (var i = Min; i <= Max; i++) {                obj.append('<option>' + i + '</option>');            }        }    </script></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。