摘要:效果圖如下代碼日第一個參數代表是否是今天的日歷,如果第一個參數為,還需要傳遞倆個參數,年和月。如何制作控制月份的控件方法如下得到頁面上的對象控件。
效果圖如下:
html代碼
-2017/12
+
1 | 2 | 3 | 4 | 5 | 6 | 日 |
---|
css代碼
table{ width: 300px; border-collapse:collapse; } th{ border-bottom: 2px solid springgreen; } td{ text-align: center; color: #999; } .this-month{ color: #333; } .today{ color: crimson; } .date-control{ width: 300px; height: 20px; background: silver; position: relative; } .date-control p{ text-align: center; line-height: 20px; color: #fff; } #pre-month,#next-mont{ display: block; height: 20px; width: 20px; color: #fff; position: absolute; top: 0; text-align: center; background: #01cd78; cursor: pointer; user-select: none; } #pre-month{ left: 0; } #next-mont{ right: 0; }
js代碼
function Calendar() { this.today = new Date(); this.table = document.getElementById("date-table").getElementsByTagName("tbody")[0]; this.preMontBtn = document.getElementById("pre-month"); this.nextMontBtn = document.getElementById("next-mont"); this.yearText = document.getElementById("table-year"); this.monthText = document.getElementById("table-month"); } Calendar.prototype={ constructor:Calendar, calendarInit:function (_isToday,_y,_m) { if(_isToday){ this.drawTable(this.today.getFullYear(),this.today.getMonth()); this.titleInit(this.today.getFullYear(),this.today.getMonth()+1); }else { this.drawTable(_y,_m-1); this.titleInit(_y,_m) } this.btnListener(); }, getMontInfo:function (_year,_month) { var firstDate = new Date(_year,_month,1); var lastDate = new Date(_year,_month+1,0); return { firstDay:firstDate.getDay()===0?7:firstDate.getDay(), lastDay:lastDate.getDay()===0?7:lastDate.getDay(), days:lastDate.getDate() } }, drawTable:function (_year,_month) { this.table.innerHTML = ""; var allDayNum = this.getDateNum(_year,_month); var rows = allDayNum.length/7; var index = 0; for(var i=0;i知識點:
1、獲得今天的日期對象:var today = new Date();
2、獲得某一月第一天和最后一天的日期對象:
var firstDate = new Date(_year,_month,1);//指定(年)月,第一天的日期對象
var lastDate = new Date(_year,_month+1,0);//指定(年)月,最后一天的日期對象3、查看日期對象的相關信息:
假設d是一個日期對象(如:var d = new Date(),或,var d=new Date(2017,12,17))
d.getFullYear();//獲得d對應的年
d.getMonth();//獲得d對應的月
d.getDate();//獲得d對應的星期4、查看日期對象的信息:
d.toLocaleString()//打印結果為:2017/12/16 上午9:55:26思路概要:(逆向)
結果為:繪制日歷
繪制table頭部,星期123457
繪制日期數字
得到日期數字數組
知道這個月有幾天,第一天星期幾,最后一天星期幾(從而,得到日期數組)。方法解析:
1、如何知道某個月有多少天,第一天星期幾,最后一天星期幾?
方法如下:
function getThisMontInfo(_year,_month) { var firstDate = new Date(_year,_month,1);//當前月第一天 var lastDate = new Date(_year,_month+1,0);//當前月最后一天 return {//返回一個對象 firstDay:firstDate.getDay()===0?7:firstDate.getDay();//當前月第一天的星期(星期日為0,如果其為零,讓其變?yōu)?)、 lastDay:lastDate.getDay()===0?7:lastDate.getDay(),//當前月最后一天的星期 days:lastDate.getDate()//當前月有多少天,即最后一天的日期。 } }2、如何獲得日期數組?
方法如下:
//前提知道年和月,即y和m //利用了上面的方法 thisMonthInfo = getThisMontInfo(y,m);//當前月相關信息 preMontInfo = getThisMontInfo(y,m-1);//上個月的相關信息 var allDayNum = []; //向數組中添加當前月日期。 for(i=0;i如何繪制table?
步驟為:
1、計算需要繪制多少行tr
2、繪制對應行數的tr
3、在每行tr中繪制7個td
4、在td中添加數字
5、用css區(qū)分這個月的日期數字和上個月或下個月的日期數字。
方法如下:function drawTable(_year,_month) { table.innerHTML = ""; var allDayNum = getDateNum(_year,_month);//通過上面的方法獲得了日期數組 var rows = allDayNum.length/7;//計算需要繪制多少行tr var index = 0;//日期數組的坐標 for(var i=0;i如何制作控制月份的控件?
方法如下:
//得到頁面上的對象控件。 var preMontBtn = document.getElementById("pre-month"); var nextMontBtn = document.getElementById("next-mont"); //為控件添加監(jiān)聽事件 preMontBtn.addEventListener("click",function () { //獲得頁面上顯示的年月 var dateInfo = { year:document.getElementById("table-year").innerText*1, month:document.getElementById("table-month").innerText*1 }; //計算上個月的年和月 var newDateInfo = { year:dateInfo.month-1===0?dateInfo.year-1:dateInfo.year, month:dateInfo.month-1===0?12:dateInfo.month-1 }; //修改頁面上的年月信息 document.getElementById("table-year").innerText = newDateInfo.year; document.getElementById("table-month").innerText = newDateInfo.month; //重新繪制表格,利用的是上文的方法 drawTable(newDateInfo.year,newDateInfo.month-1); }); //對下個月按鈕的監(jiān)聽 nextMontBtn.addEventListener("click",function () { var dateInfo = { year:document.getElementById("table-year").innerText*1, month:document.getElementById("table-month").innerText*1 }; var newDateInfo = { year:dateInfo.month+1===13?dateInfo.year+1:dateInfo.year, month:dateInfo.month+1===13?1:dateInfo.month+1 }; document.getElementById("table-year").innerText = newDateInfo.year; document.getElementById("table-month").innerText = newDateInfo.month; drawTable(newDateInfo.year,newDateInfo.month-1); });完整代碼在開篇。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51595.html
摘要:效果圖如下代碼日第一個參數代表是否是今天的日歷,如果第一個參數為,還需要傳遞倆個參數,年和月。如何制作控制月份的控件方法如下得到頁面上的對象控件。 效果圖如下:showImg(https://segmentfault.com/img/bV0rKL?w=379&h=221); html代碼 - 2017/12 + 1234...
摘要:效果圖如下代碼日第一個參數代表是否是今天的日歷,如果第一個參數為,還需要傳遞倆個參數,年和月。如何制作控制月份的控件方法如下得到頁面上的對象控件。 效果圖如下:showImg(https://segmentfault.com/img/bV0rKL?w=379&h=221); html代碼 - 2017/12 + 1234...
摘要:閑暇之余,聽媳婦嘀咕說要給她做一個能表達她每日心情的小程序,只能她在上面發(fā)東西。既然媳婦發(fā)話了,就花點心思做一個吧,因為沒有圖,所有布局全靠自己瞎編,下面結合圖片和代碼跟大家講解下實現過程,內容略長,感興趣的可以一覽。 閑暇之余,聽媳婦嘀咕說要給她做一個能表達她每日心情的小程序,只能她在上面發(fā)東西。既然媳婦發(fā)話了,就花點心思做一個吧,因為沒有UI圖,所有布局全靠自己瞎編,下面結合圖片和...
摘要:官網地址聊天機器人插件開發(fā)實例教程一創(chuàng)建插件在系統技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章,一直想有機會再次實踐下。 2道面試題:輸入URL按回車&HTTP2 - 掘金通過幾輪面試,我發(fā)現真正那種問答的技術面,寫一堆項目真不如去刷技術文章作用大,因此刷了一段時間的博客和掘金,整理下曾經被...
摘要:一些有用的一些有用的,包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程,大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署,可能大多數前端工程師在工作中都是使用的公司現成的部署系統,與SRE對接、一起完...
閱讀 2871·2021-10-14 09:43
閱讀 1657·2021-09-29 09:34
閱讀 1743·2021-07-28 00:16
閱讀 2962·2019-08-30 15:53
閱讀 2905·2019-08-30 13:59
閱讀 2961·2019-08-30 13:57
閱讀 1091·2019-08-26 13:38
閱讀 1893·2019-08-26 13:25