JavaScript快速實(shí)現(xiàn)日歷效果
更新時(shí)間：2021年03月07日 14:05:07 作者：云杰8了
這篇文章主要為大家詳細(xì)介紹了JavaScript快速實(shí)現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript快速實(shí)現(xiàn)日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#calendar {
background-color: #9900ff;
color: #fff;
border-radius: 5px;
margin: 100px auto;
}
#title {
font-size: 1.4em;
padding: 4px 0.55em;
}
#days th {
font-weight: bold;
text-align: center;
padding: 4px 0.55em;
}
#calendar td {
text-align: center;
padding: 4px 20px;
}
#today {
color: #f00;
font-weight: bold;
}
.poin {
cursor: pointer;
cursor: hand;
}
</style>
<script>
window.onload=function(){
var form = document.getElementById('calendar');
// 通過(guò)日歷對(duì)象去調(diào)用自身的init方法
calendar.init(form);
}
var calendar = {
year: null,
month: null,
//日的數(shù)組
dayTable: null,
//初始化函數(shù)
init(form) {
// 1獲取日數(shù)組
this.dayTable=form.getElementsByTagName('td');
//2創(chuàng)建日歷,傳入當(dāng)前時(shí)間
this.createCalendar(form,new Date());
var nextMon=form.getElementsByTagName('th')[2];
var preMon=form.getElementsByTagName('th')[0];
preMon.onclick=function(){
calendar.clearCalendar(form)
var preDate=new Date(calendar.year,calendar.month-1,1);
calendar.createCalendar(form,preDate)
}
nextMon.onclick=function(){
calendar.clearCalendar(form)
var nextDate=new Date(calendar.year,calendar.month+1,1);
calendar.createCalendar(form,nextDate)
}
},
//清除日歷數(shù)據(jù)
clearCalendar(form){
var tds=form.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].innerHTML=' ';
// 清除今天的樣式
tds[i].id='';
}
},
// 3生成日歷
// from table表格 date要?jiǎng)?chuàng)建的日期
createCalendar(form,date){
//獲取此時(shí)的年份
this.year=date.getFullYear();
//獲取此時(shí)的月份
this.month=date.getMonth();
//年份月份寫入日歷
form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
//獲取本月的天數(shù)
var dataNum=this.getDateLen(this.year,this.month);
var fristDay = this.getFristDay(calendar.year,calendar.month);
// 循環(huán)將每一天的天數(shù)寫入到日歷中
// 讓i表示日期。
for (var i = 1; i <= dataNum; i++) {
this.dayTable[fristDay+i-1].innerHTML=i;
var nowDate =new Date();
if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
// 將當(dāng)期元素的id設(shè)置為today
calendar.dayTable[i+fristDay-1].id = "today";
}
}
},
// 獲取本月份的天數(shù)
getDateLen(year,month){
//獲取下個(gè)月的第一天
var nextMonth=new Date(year,month+1,1);
// 設(shè)置下月第一天的小時(shí)-1，也就是上個(gè)月最后一天的小時(shí)數(shù)，隨便減去一個(gè)值不要超過(guò)24小時(shí)
nextMonth.setHours(nextMonth.getHours()-1);
//獲取此時(shí)下個(gè)月的日期,就是上個(gè)月最后一天.
return nextMonth.getDate();
},
// 獲取本月第一天為星期幾。
getFristDay:function(year,month){
var fristDay=new Date(year,month,1);
return fristDay.getDay();
}
}
</script>
</head>
<body>
<table id="calendar">
<tr>
<!-- 向左箭頭 -->
<th class="poin"><<</th>
<!-- 年月 -->
<th id="title" colspan="5"></th>
<!-- 向右箭頭 -->
<th class="poin">>></th>
</tr>
<tr id="days">
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本節(jié)主要介紹了js識(shí)別不同瀏覽器依據(jù)是userAgent，需要的朋友可以參考下2014-07-07
ECharts 是一個(gè)使用JavaScript實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識(shí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
實(shí)例詳解display:none與visible:hidden的區(qū)別
這篇文章主要介紹了實(shí)例詳解display:none與visible:hidden的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-03-03
ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程
這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了JS使用cookie設(shè)置樣式的方法,涉及javascript樣式的設(shè)置與cookie的讀寫相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
javascript parseInt與Number函數(shù)的區(qū)別
在js中，如果你使用parseInt("08"),一般都會(huì)認(rèn)為會(huì)返回8，然而實(shí)際上返回了0.但是用Number("08")返回的才是8.2010-01-01
這篇文章主要介紹了js獲取及修改網(wǎng)頁(yè)背景色和字體色的方法,涉及JavaScript針對(duì)頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-12-12
簡(jiǎn)單實(shí)現(xiàn)js菜單欄切換效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js菜單欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
javascript自動(dòng)生成包含數(shù)字與字符的隨機(jī)字符串
這篇文章主要介紹了javascript自動(dòng)生成包含數(shù)字與字符的隨機(jī)字符串,涉及Math.random()和Math.floor()兩個(gè)函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02