基于javascript實現(xiàn)日歷功能原理及代碼實例

更新時間：2020年05月07日 10:26:15 作者：凌轢VF

這篇文章主要介紹了基于javascript實現(xiàn)日歷效果原理及代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

日歷

在學(xué)習(xí)javascript過程中，菜鳥教程有一個javascript實例---css日歷，感覺挺有趣的，在它的基礎(chǔ)上增加了一些簡單的功能（差點哭遼）。

功能

按照傳統(tǒng)日歷方式顯示該月的每一天。
可以突出顯示今天的日期
可以翻閱上一個月和下一個月的日歷

實現(xiàn)

step1 傳統(tǒng)日歷布局樣式：分別將年份與月份、星期、該月的全部天數(shù)采用列表布局，排列組成傳統(tǒng)日歷的樣式。
step2 初始化和更新月份：先將列表清空（debug過程中，有一個發(fā)現(xiàn)，初始化的列表便存在的一個childNodes，該項目中需要清空），然后再填入前導(dǎo)空白（為了和星期能夠?qū)?yīng)），再填入具體某一個月的天數(shù)。
step3 通過document獲取列表對象，改變今天對應(yīng)行的樣式（className變化）來突出顯示。
其他細節(jié)在代碼中實現(xiàn)

代碼

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,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;
	}
} 
//main
init();

總結(jié)

javascript目前算是起步，最最基礎(chǔ)的皮毛學(xué)會了，起碼不會的東西可以通過去找函數(shù)，查資料學(xué)習(xí)，可能實現(xiàn)的有些復(fù)雜，但是最終能夠表達出自己的構(gòu)想，聽開心的。下一步，再寫一些實例去看jquery。

css仍是不足，有些東西可能會有沖突，無法實現(xiàn)想要的東西，仍要回去學(xué)基礎(chǔ)的東西，最重要的一點是多練，積累經(jīng)驗，總結(jié)規(guī)律和思想。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: