zoukankan      html  css  js  c++  java
  • 第一次自己成功写成的js程序

    今天有点小鸡动写了一个个人js史上的第一个功能信js插件感觉做完之后特别有成就感!要得就是这种感觉啊下面我把代码贴出来欢迎吐槽

    <!DOCTYPE html>
    <html xmlns=http://www.w3.org/1999/xhtml>
    <script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <meta name="Keywords" content=""/>
        <meta name="Description" content=""/>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width: 700px;margin: 0 auto;border: solid 2px gray;}
            .hd{height: 50px;position: relative;}
            .week{height: 50px;border-top:solid 1px gray;}
            .week span{float: left;width:100px;height: 50px;line-height:50px;text-align:center;width:100px;}
            .left{position: absolute;width: 100px;height: 50px;line-height: 50px;left:0;top:0;cursor:pointer;}
            .year{position: absolute;width: 500px;height: 50px;line-height: 50px;text-align: center;left:100px;top:0;}
            .right{position: absolute;width: 100px;height: 50px;line-height: 50px;right:0;top:0;cursor:pointer;}
            .day{overflow: hidden;list-style:none;}
            .day li{float: left;width: 100px;height: 100px;text-align: center;line-height: 100px;font-size: 30px;}
            .no{background: #ededed;color: gray;}
        </style>
    </head>
    <body>
    <div class="box">
        <h1 class="hd">
            <i class="left">Left</i>
            <i class="year"></i>
            <i class="right">Right</i>
        </h1>
        <p class="week">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </p>
        <ul class="day">
    
        </ul>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    $(function(){
        var time = new Date();
        var nYear = time.getFullYear();
        var nMonth = time.getMonth()+1;
        creatTable(nYear,nMonth);
    
        $('.left').click(function(){
            nMonth--;
            if(nMonth==0){
                nYear--;
                nMonth = 12;
            }
            creatTable(nYear,nMonth);
        });
        $('.right').click(function(){
            nMonth++;
            if(nMonth == 13){
                nYear++;
                nMonth = 1;
            }
            creatTable(nYear,nMonth);
        });
    
        function creatTable(_year,_month){
            var dayNub = 0;
            var day30 = [4,6,9,11];
            var day31 = [1,3,5,7,8,10,12];
    
            if(inArray(day30,_month)){
                dayNub = 30;
            }else if(inArray(day31,_month)){
                dayNub = 31;
            }else{
                if(nYear%4 == 0 && nYear%100 != 0 && nYear%400 ==0){
                    dayNub = 29;
                }else{
                    dayNub = 28;
                }
            }
    
            $('.year').html(_year+'/'+_month);
            $('.day').html('');
            for(var i=0;i<7;i++){
                var firstWeek = compute(_year,_month);
                if(i<firstWeek){
                    $('.day').html($('.day').html()+'<li></li>');
                }
            };
            for(var i=1;i<=dayNub;i++){
                $('.day').html($('.day').html()+'<li>'+i+'</li>');
            }
    
            function compute(_year,_month){
                var day = new Date(Date.parse(_year+'/'+_month+'/'+1));                             //将日期值格式化
                return day.getDay();                                                                //返一个星期中的某一天,其中0为星期日
            };
            function inArray(attr,value){
                for(var i in attr){
                    if(attr[i] == value){
                        return true;
                    };
                };
                return false;
            };
        }
    
    });
    </script>
  • 相关阅读:
    [PHP] 小数转科学计数法, 小数保留 n 位
    [Blockchain] Cosmos Starport 101
    [Blockchain] Cosmos Starport 地址前缀的变更方式
    [Blockchain] Cosmos Starport 安装的三种方式
    [ML] 机器学习的 7 步走
    [FAQ] MEMORY ALLOC FAILED: mmap with HUGETLB failed, attempting without it (you should fix your kernel)
    [FAQ] FastAdmin epay 微信公众号支付 JSAPI 支付必须传 openid ?
    [TP5] 动态绑定指定默认模块, 解决: 控制器不存在:appindexcontrollerApi
    [TP5] ThinkPHP 默认模块和单模块的设置方式
    [TP5] 浅谈 ThinkPHP 的 Hook 行为事件及监听执行
  • 原文地址:https://www.cnblogs.com/BobSky/p/3148774.html
Copyright © 2011-2022 走看看