jquery写的万年历的小例子

最新推荐文章于 2024-07-28 20:27:10 发布

淡淡忧愁

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量2.1k

点赞数 2

分类专栏： jQuery 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/zzx252373003/article/details/18552205

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<style>
    .main{
        width:600px;
        height:350px;
        background:gray;
        margin-left: auto;
        margin-right: auto;
        overflow:hidden; 
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }
    .title{
        text-align:center;
    }
    .date{
        float:left;
        padding-left:31px;
    }
    .date1{
        float:left;
        width:20px;
        height:20px;
        padding-top:10px;
        padding-left:30px;
        padding-right:30px;
    }
    .content{
        margin-left:25px;
    }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
    <script>
        function getTime(year,month,day){
            y = year
            m = month
            d = day
            var myDate = new Date(year,month-1,day);
            return myDate;
        }
        function days_in_month(year, month) {
            y = year;
            m = month;
            return 32 - new Date(y, m - 1, 32).getDate();
        }
        function view(year,month){
            
            var w = getTime(year,month,1).getDay()-1;
            var num = days_in_month(year,month);
            var index = 1;
            //console.log(w);
            var data = new Array();
            for(var d = 0; d < num+w; d++){
                if(d<w){
                    data[d] = '';
                }else{
                    data[d] = index;
                    index++;
                }                
            }
            $("#content").html('');
            for(var k =0;k < data.length;k++){
                if(k%7==0){
                    $("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div><br>");
                }else{
                    $("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div>");
                }
            }
            $("#content > div").mouseover(function(){
                if($(this).text()!=''){
                    $(this).css('background','red');
                }
            });
            $("#content > div").mouseout(function(){
                if($(this).text()!=''){
                    $(this).css('background','gray');
                }
            });
        }

        $(document).ready(function (){
            for(var t = 1970; t < 2999; t++){
                $("#yearsel").append("<option value ='"+t+"'>"+t+"</option>");
            }
            for(var y = 1; y < 13;y++){
                $("#monthsel").append("<option value ='"+y+"'>"+y+"</option>");
            }
            var year = new Date().getFullYear();
            var month = new Date().getMonth()+1;
            var day = new Date().getDate();
            var w = getTime(year,month,1).getDay()-1;
            var num = day + w -1;
            $("#yearsel").change(function(){
                year = $("#yearsel option:selected").text();
                month = $("#monthsel option:selected").text();
                view(year,month);
            });
            $("#monthsel").change(function(){
                year = $("#yearsel option:selected").text();
                month = $("#monthsel option:selected").text();
                view(year,month);
            });
            var oDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日',];
            for(var i = 0;i < 7;i++){
                $("#title").append("<div class='date'><b>"+oDate[i]+"</b></div>");
            }
            $("#yearsel option[value='"+year+"']").attr("selected", true);
            view(year,month);
            //标记当前日期
            $("#t"+num).css('background','yellow');
        });
    </script>
</head>
    <body>
        <div id="main" class="main">
            <center><h3>万年历</h3></center>
            <select id="yearsel">
            </select>年
            <select id="monthsel">
            </select>月<br><br>
            <div id="title" class="title">
            </div>
            <div id="content" class="content">
            </div>
        </div>
    </body>
</html>

淡淡忧愁

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery写的万年历的小例子

.main{ width:600px; height:350px; background:gray; margin-left: auto; margin-right: auto; overflow:hidden; -webkit-border-radius: 10px;
复制链接

扫一扫