js+html+css實(shí)現(xiàn)簡(jiǎn)單日歷效果
本文實(shí)例為大家分享了js+html+css實(shí)現(xiàn)簡(jiǎn)單日歷效果的具體代碼,供大家參考,具體內(nèi)容如下
效果:
遇到的問(wèn)題與解決方法:
1.“日”上移
方法:在“下個(gè)月”button后加上<div> </div>防止上移
<div> </div>
2.打完代碼后不顯示日期,但按鈕切換月份可用
方法:最后一行那里,在父元素才可以用,替換為daterow.appendChild(dayElement);
for (var j=1;j<=allday;j++){ ? ? ? ? var dayElement=document.createElement('div'); ? ? ? ? dayElement.className='everyday'; ? ? ? ? dayElement.innerHTML=j+''; ? ? ? ?? ? ? ? ? if(j==day){ ? ? ? ? ? ? dayElement.style.color='red'; ? ? ? ? } ? ? ? ? dayElement.appendChild(dayElement);《《《《《
源代碼:
HTML部分
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8"> ?? ??? ?<title>2.2電子日歷的設(shè)計(jì)與實(shí)現(xiàn)</title> ?? ??? ?<link rel="stylesheet" type="text/css" href="css/calendar.css" /> ?? ??? ?<script src="js/calendar.js" type="text/javascript" charset="utf-8"></script> ?? ?</head> ?? ?<body onload="showDate()"> ?? ??? ?<h3>電子日歷的設(shè)計(jì)與實(shí)現(xiàn)</h3> ?? ??? ?<hr > ?? ??? ?<div id="calendar"> ?? ??? ??? ?<!-- 狀態(tài)欄 --> ?? ??? ??? ?<div> ?? ??? ??? ??? ?<!-- 顯示“上個(gè)月”按鈕 --> ?? ??? ??? ??? ?<button onclick="lastMonth()">上個(gè)月</button> ?? ??? ??? ??? ?<!-- 顯示當(dāng)前年份月份 --> ?? ??? ??? ??? ?<div id="month"></div> ?? ??? ??? ??? ?<!-- 顯示“下個(gè)月”按鈕 --> ?? ??? ??? ??? ?<button onclick="nextMonth()">下個(gè)月</button> ?? ??? ??? ??? ?<div> </div> <!--為了調(diào)節(jié)防止“日”上移--> ?? ??? ??? ?</div> ?? ??? ??? ? ?? ??? ??? ?<!-- 顯示星期幾 --> ?? ??? ??? ?<div> ?? ??? ??? ??? ?<div class="everyday">日</div> ?? ??? ??? ??? ?<div class="everyday">一</div> ?? ??? ??? ??? ?<div class="everyday">二</div> ?? ??? ??? ??? ?<div class="everyday">三</div> ?? ??? ??? ??? ?<div class="everyday">四</div> ?? ??? ??? ??? ?<div class="everyday">五</div> ?? ??? ??? ??? ?<div class="everyday">六</div> ?? ??? ??? ?</div> ?? ??? ??? ? ?? ??? ??? ?<!-- 顯示當(dāng)前月份每天的日期 --> ?? ??? ??? ?<div id="day"></div> ?? ??? ?</div> ?? ?</body> </html>
css部分
div{ ?? ?text-align: center; ?? ?margin-top: 10px; ?? ?margin-bottom: 10px; } #calendar{ ?? ?width: 400px; ?? ?margin: auto; } button{ ?? ?width: 25%; ?? ?float: left; ?? ?height: 40px; } #month{ ?? ?width: 50%; ?? ?float: left; } .everyday{ ?? ?width: 14%; ?? ?float: left; }
js部分
var today=new Date(); var year=today.getFullYear(); //獲取當(dāng)前年份 var month=today.getMonth()+1; //獲取當(dāng)前月份 var day=today.getDate(); //獲取當(dāng)前日期 var allday=0; //當(dāng)前月份的總天數(shù) ? //用于推算當(dāng)前月份一共多少天 function count(){ ?? ?if (month !=2){ ?? ??? ?if ((month==4)||(month==6)||(month==9)||(month==11)){ ?? ??? ??? ?allday=30; ?? ??? ??? ?//4,6,9,11月份為30天 ?? ??? ?}else{ ?? ??? ??? ?allday=31; ?? ??? ??? ?//其他月份為31天(不包括2月) ?? ??? ?} ?? ?}else{ ?? ??? ?//如果是2月份需要判斷當(dāng)前是否為閏年 ?? ??? ?if (((year%4)==0&&(year%100)!=0)||(year%400)==0){ ?? ??? ??? ?allday=29; ?? ??? ??? ?//閏年的2月份是29天 ?? ??? ?}else{ ?? ??? ??? ?allday=28; ?? ??? ??? ?//非閏年的2月份是28天 ?? ??? ?} ?? ?} } ? //顯示日歷標(biāo)題中的當(dāng)前年份和月份 function showMonth(){ ?? ?var year_month=year+"年"+month+"月"; ?? ?document.getElementById("month").innerHTML=year_month; } ? //顯示當(dāng)前月份的日歷 function showDate(){ ?? ?showMonth();//在年份和月份的顯示牌上顯示當(dāng)前的年月 ?? ?count();//計(jì)算當(dāng)前月份的總天數(shù) ?? ? ?? ?//獲取本月第一天的日期對(duì)象 ?? ?var firstdate=new Date(year,month-1,1); ?? ? ?? ?//推算本月的第一天是星期幾 ?? ?var xq=firstdate.getDay(); ?? ? ?? ?//動(dòng)態(tài)添加HTML元素 ?? ?var daterow=document.getElementById("day"); ?? ?daterow.innerHTML=''; ?? ? ?? ?//如果本月的第一天不是星期日,則前面需要用空白元素補(bǔ)全日期 ?? ?if (xq !=0){ ?? ??? ?for (var i=0;i<xq;i++){ ?? ??? ??? ?var dayElement=document.createElement('div'); ?? ??? ??? ?dayElement.className='everyday'; ?? ??? ??? ?daterow.appendChild(dayElement); ?? ??? ?} ?? ?} ?? ? ?? ?//使用循環(huán)語(yǔ)句將當(dāng)前月份的所有日期顯示出來(lái) ?? ?for (var j=1;j<=allday;j++){ ?? ??? ?var dayElement=document.createElement('div'); ?? ??? ?dayElement.className='everyday'; ?? ??? ?dayElement.innerHTML=j+''; ?? ??? ? ?? ??? ?//如果日期為今天,將顯示為紅色 ?? ??? ?if(j==day){ ?? ??? ??? ?dayElement.style.color='red'; ?? ??? ?} ?? ??? ?// dayElement.appendChild(dayElement); ?? ??? ?daterow.appendChild(dayElement); ?? ?} } ? //顯示上個(gè)月的日歷 function lastMonth(){ ?? ?if (month>1){ ?? ??? ?month-=1; ?? ?}else{ ?? ??? ?month=12; ?? ??? ?year-=1; ?? ?} ?? ?showDate(); } ? //顯示下個(gè)月的日歷 function nextMonth(){ ?? ?if (month<12){ ?? ??? ?month+=1; ?? ?}else{ ?? ??? ?month=1; ?? ??? ?year+=1; ?? ?} ?? ?showDate(); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)
在傳統(tǒng)面向?qū)ο笳Z(yǔ)言中,this關(guān)鍵字是個(gè)很乖的小孩,從不亂跑,該是誰(shuí)的就是誰(shuí)的??墒窃贘avaScript中,我們發(fā)現(xiàn)它不那么乖,有時(shí)甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對(duì)它稍微做個(gè)總結(jié)。2010-10-10JavaScript async&await方法中的異常處理方案
在 async/await 方法中,可以使用 try-catch 塊來(lái)處理異常,通過(guò)使用 try-catch,可以捕獲異步操作中拋出的異常,并在 catch 塊中進(jìn)行適當(dāng)?shù)奶幚?本文給大家詳細(xì)介紹了async&await方法中異常如何處理,需要的朋友可以參考下2023-08-08javascript 四則運(yùn)算精度修正函數(shù)代碼
JS預(yù)算精度問(wèn)題確實(shí)很麻煩,這個(gè)能解決一些問(wèn)題,雖然有bug.2010-05-05JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法
這篇文章主要介紹了JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法,因?yàn)槲覀冃枰刂埔幌麻L(zhǎng)度,需要的朋友可以參考下2016-01-01預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存
這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-10-10