小练习

 3d旋转盒子

<title>无标题文档</title>
</head>
<style>
*{margin: 0;padding: 0;}
ul {
 200px;
height: 200px;
margin: 200px auto;
position: relative;
transition: all 6s;
/*6秒时间转变*/
transform-style: preserve-3d;//使盒子呈现3d状态
/*放在父盒子内*/
}
ul li {
 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
li:nth-child(1){
transform: rotateX(0deg) translateZ(100px);
/*translateZ是为了让立方体出现形状*/
background-color: rgba(255, 0, 0, 0.6);
}
li:nth-child(2){
transform: rotateX(-90deg) translateZ(100px);//第二个盒子在底部
background-color: rgba( 0, 255,0, 0.6);
}
li:nth-child(3){
transform: rotateX(-180deg) translateZ(100px);//倒过来在背面
background-color: rgba(0,0,255,0.5);
}
li:nth-child(4){
transform: rotateX(-270deg) translateZ(100px);在顶部
background-color: rgba(50,50,25,0.5);
}
li:nth-child(5){
transform: rotateY(-90deg) translateZ(100px);//在两侧
background-color: rgba(255,0,255,0.5);
}
li:nth-child(6){
transform: rotateY(90deg) translateZ(100PX);//在两侧
background-color: rgba(0,255,255,0.5);
}
ul:hover{
transform :rotateX(360deg) rotateY(360deg);//悬浮移动
}

  </style>
<body>
<ul>
<li>第1个盒子</li>
<li>第2个盒子</li>
<li>第3个盒子</li>
<li>第4个盒子</li>
<li>第5个盒子</li>
<li>第6个盒子</li>
</ul>
</body>
</html>

日历（输入年份和日历进行查询）

   $(function(){
        date();
    })
    function date(){
        var arrDate = [1477977359703, 1476854273556]; //签到日期
        dateDay = new Array();
         test();//声明年月当前星期函数
        $("#btn").click(function(){
            test();
        });
        $("#J_calendar_month>span").click(function(){
            test();
        });
    }
    //处理日历
    function calenHandle(year,month,day){//执行函数
        //获取这一个月的天数
        var monthDayNum = getMonthDay(year,month);
        //获取今天的日期
        var weekDayNum = getWeekDay(monthDayNum,month,day);
    }
    //获取这一个月的天数
    function getMonthDay(year,month){
        var arr = [31,28,31,30,31,30,31,31,30,31,30,31];//一年的天数
        //判断是否是瑞年
        var leap = isLeapYear(year);
        if(leap && month == 2){
            return 29;//闰年天数
        }else{
            return arr[month-1];//从0开始，但是month从1开始的
        }
    }
    //判断是否是瑞年
    function isLeapYear(year){
        if((year%4 == 0 && year%100 != 0) || (year%100 ==0 && year%400 == 0)){
            return true;
        }else{
            return false;
        }
    }
    //获取今天的日期
    function getWeekDay(monthDayNum,month,day){
        $("#J_calendar_content").html("");
        //获取第一天星期几
        var week = day,
                liText = '',
                preMonthDay = getMonthDay(year,month-1),//本月前几天的天数
                preLen = preMonthDay - week + 1,//42个格子中上个月剩下的天数
                nextLen = 42 - monthDayNum - week;//42个格子中下个月天数
        for(var i=week;i>0;i--){循环
            liText += "<li class='other'>"+' '+"</li>";
            preLen++;
        }
        for(var i=1;i<=monthDayNum;i++){//添加天数
            if(i == day){
                liText += "<li class='today'>"+i+"</li>"
            }else{
                liText += "<li>"+i+"</li>"
            }
        }

        $("#J_calendar_content").append(liText);//在div中添加
    }
    //获取一个月的第一天星期几
    function weekHandle(year,month){
        var weekArr = new Array(0,1,2,3,4,5,6);
        var date = new Date(year,month,1);
        return date.getDay();
    }
    function test(){
          year=parseInt($("#J_calendar_year").val());//字符串转为字符
          month=parseInt($("#mon").val());
          var date = new Date(year,month-1,1);//获取某年某月的日期,为什么要减一，因为第二个参数的范围是0-11，不是1-12
          day=date.getDay();//获取是星期几
          calenHandle(year,month,day);
    }

关于$(this）.$("标签")不能这样用是无效的，可以这样用 $(this).find('标签')//头都大了

关于each点击事件总是记不住

$(function(){
             $('.box').each(function(i){
       $(this).click(function(){
        $(this).toggleClass('active');
       text=$(this).find('.openOne span').text();
        if(text=="NO"){
          $(this).find('.openOne span').text('YES');
        }else{
           $(this).find('.openOne span').text('NO');
        }
       })
      });
    })