基於javascript實現日曆功能原理及程式碼例項
阿新 • • 發佈:2020-05-08
日曆
在學習javascript過程中,菜鳥教程有一個javascript例項---css日曆,感覺挺有趣的,在它的基礎上增加了一些簡單的功能(差點哭遼)。
功能
- 按照傳統日曆方式顯示該月的每一天。
- 可以突出顯示今天的日期
- 可以翻閱上一個月和下一個月的日曆
實現
- step1 傳統日曆佈局樣式:分別將年份與月份、星期、該月的全部天數採用列表佈局,排列組成傳統日曆的樣式。
- step2 初始化和更新月份:先將列表清空(debug過程中,有一個發現,初始化的列表便存在的一個childNodes,該專案中需要清空),然後再填入前導空白(為了和星期能夠對應),再填入具體某一個月的天數。
- step3 通過document獲取列表物件,改變今天對應行的樣式(className變化)來突出顯示。
- 其他細節在程式碼中實現
程式碼
html程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS日曆</title> <link type="text/css" rel="stylesheet" href="style.css" rel="external nofollow" > </head> <body> <h1>CSS日曆</h1> <div class="month"> <ul> <li class="prev" onclick="change(-1)">❮</li> <li class="next" onclick="change(1)">❯</li> <li style="text-align: center"><span id="month">August</span><br> <span style="font-size: 18px" id="year">2016</span></li> </ul> </div> <ul class="weekdays" id="weekdays"> </ul> <ul class="days" id="days"> </ul> </body> <script type="text/javascript" src="show.js"></script> </html>
CSS程式碼
@charset "UTF-8"; * {box-sizing:border-box;} ul {list-style-type: none;} body {font-family: Verdana,sans-serif;} .center { text-align: center; border: 3px solid green; } .month { padding: 70px 25px; width: 100%; background: #1abc9c; } .month ul { margin: 0; padding: 0; } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .month .prev { float: left; padding-top: 10px; } .month .next { float: right; padding-top: 10px; } .weekdays { margin: 0; padding: 10px 0; background-color: #ddd; } .weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; } .days { padding: 10px 0; background: #eee; margin: 0; } .days li { list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size:12px; color: #777; } .days li active { padding: 5px; background: #1abc9c; color: white !important; } /* Add media queries for smaller screens */ @media screen and (max-width:720px) { .weekdays li,.days li {width: 13.1%;} } @media screen and (max-width: 420px) { .weekdays li,.days li {width: 12.5%;} .days li .active {padding: 2px;} } @media screen and (max-width: 290px) { .weekdays li,.days li {width: 12.2%;} }
javascript程式碼
var date = new Date(); var year = date.getFullYear(); var month=date.getMonth(); var day = date.getDate(); var week=date.getDay(); var p=(week-day+1+35)%7+day-1; var monthName=[ "January","February","March","April","May","June","July","August","September","October","November","December" ]; var monthNum=[ 31,28,31,30,31 ]; var weekName=[ "Su","Mo","Tu","We","Th","Fr","Sa" ]; var aimmonth=month,aimyear=year; function init(){ createTitle(year,month); var weekdays=document.getElementById("weekdays"); for(var i=0;i<7;i++){ var x = document.createElement("LI"); var t = document.createTextNode(weekName[i]); x.appendChild(t); weekdays.appendChild(x); } delDay(); createDay(); isnow(); } function change(x){ aimmonth+=x; if(aimmonth==-1){ aimyear-=1; aimmonth=11; }else if(aimmonth==12){ aimyear+=1; aimmonth=0; } createTitle(aimyear,aimmonth); delDay(); createDay(); isnow(); } function createTitle(y,m){ document.getElementById("year").innerHTML=y; document.getElementById("month").innerHTML=monthName[m]; } function createDay(){ var datetmp=new Date(); datetmp.setFullYear(aimyear,aimmonth,1); var firstday=datetmp.getDay(); var days=document.getElementById("days"); for(var i=0;i<firstday;i++){ var x = document.createElement("LI"); var t = document.createTextNode(""); x.appendChild(t); days.appendChild(x); } for(var i=1;i<=getMonthDay();i++){ var x = document.createElement("LI"); var t = document.createTextNode(i); x.appendChild(t); days.appendChild(x); } } function delDay(){ var list=document.getElementById("days"); var len=list.childNodes.length; for(var i=0;i<len;i++){ list.removeChild(list.childNodes[0]); } } function isnow(){ if(aimyear==year&&aimmonth==month){ days.childNodes[p].style="padding: 5px;background: #1abc9c;color: white !important;" } } function getMonthDay(){ if(aimmonth!=2){ return monthNum[aimmonth]; }else{ if(aimyear%4!=0||aimyear%100==0&&aimyear%400!=0){ return monthNum[aimmonth]; } else return 29; } } //main init();
總結
javascript目前算是起步,最最基礎的皮毛學會了,起碼不會的東西可以通過去找函式,查資料學習,可能實現的有些複雜,但是最終能夠表達出自己的構想,聽開心的。下一步,再寫一些例項去看jquery。
css仍是不足,有些東西可能會有衝突,無法實現想要的東西,仍要回去學基礎的東西,最重要的一點是多練,積累經驗,總結規律和思想。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。