當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

小练习

發布時間：2025/7/14 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了小练习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?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-12day=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');}})});})

轉載于:https://www.cnblogs.com/cindy-hmy/p/6096606.html

總結

以上是生活随笔為你收集整理的小练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： css 字体样式设置
下一篇：简析服务端通过geotools导入SHP