基于javascript實(shí)現(xiàn)日歷功能原理及代碼實(shí)例
日歷
在學(xué)習(xí)javascript過程中，菜鳥教程有一個(gè)javascript實(shí)例---css日歷，感覺挺有趣的，在它的基礎(chǔ)上增加了一些簡(jiǎn)單的功能（差點(diǎn)哭遼）。
功能
按照傳統(tǒng)日歷方式顯示該月的每一天。 可以突出顯示今天的日期 可以翻閱上一個(gè)月和下一個(gè)月的日歷實(shí)現(xiàn)
step1 傳統(tǒng)日歷布局樣式：分別將年份與月份、星期、該月的全部天數(shù)采用列表布局，排列組成傳統(tǒng)日歷的樣式。 step2 初始化和更新月份：先將列表清空（debug過程中，有一個(gè)發(fā)現(xiàn)，初始化的列表便存在的一個(gè)childNodes，該項(xiàng)目中需要清空），然后再填入前導(dǎo)空白（為了和星期能夠?qū)?yīng)），再填入具體某一個(gè)月的天數(shù)。 step3 通過document獲取列表對(duì)象，改變今天對(duì)應(yīng)行的樣式（className變化）來突出顯示。 其他細(xì)節(jié)在代碼中實(shí)現(xiàn)代碼
html代碼
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>CSS日歷</title><link type='text/css' rel='stylesheet' href='http://www.aoyou183.cn/bcjs/style.css' rel='external nofollow' ></head><body> <h1>CSS日歷</h1> <div class='month'><ul><li onclick='change(-1)'>❮</li><li onclick='change(1)'>❯</li><li style='text-align: center'><span id='month'>August</span><br><span id='year'>2016</span></li></ul></div><ul id='weekdays'></ul><ul id='days'></ul></body><script type='text/javascript' src='http://www.aoyou183.cn/bcjs/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,30,31,31,30,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;}} //maininit();
總結(jié)
javascript目前算是起步，最最基礎(chǔ)的皮毛學(xué)會(huì)了，起碼不會(huì)的東西可以通過去找函數(shù)，查資料學(xué)習(xí)，可能實(shí)現(xiàn)的有些復(fù)雜，但是最終能夠表達(dá)出自己的構(gòu)想，聽開心的。下一步，再寫一些實(shí)例去看jquery。
css仍是不足，有些東西可能會(huì)有沖突，無法實(shí)現(xiàn)想要的東西，仍要回去學(xué)基礎(chǔ)的東西，最重要的一點(diǎn)是多練，積累經(jīng)驗(yàn)，總結(jié)規(guī)律和思想。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 測(cè)試模式 - XSL教程 - 52. python b站視頻下載的五種版本3. 如何通過vscode運(yùn)行調(diào)試javascript代碼4. 解決Java中的java.io.IOException: Broken pipe問題5. Python結(jié)合百度語音識(shí)別實(shí)現(xiàn)實(shí)時(shí)翻譯軟件的實(shí)現(xiàn)6. JAVA抽象類及接口使用方法解析7. python如何寫個(gè)俄羅斯方塊8. 《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)（一)9. 教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)10. vue實(shí)現(xiàn)簡(jiǎn)易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
網(wǎng)公網(wǎng)安備