小练习
3d旋转盒子
<title>无标题文档</title> </head> <style> *{margin: 0;padding: 0;} ul { width: 200px; height: 200px; margin: 200px auto; position: relative; transition: all 6s; /*6秒时间转变*/ transform-style: preserve-3d;//使盒子呈现3d状态 /*放在父盒子内*/ } ul li { width: 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'); } }) }); })
