js+html+css實現(xiàn)簡單日歷效果

更新時間：2022年06月20日 08:57:03 作者：好多bug

這篇文章主要為大家詳細介紹了js+html+css實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js+html+css實現(xiàn)簡單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

遇到的問題與解決方法：

1.“日”上移

方法：在“下個月”button后加上<div> </div>防止上移

<div>&nbsp;</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電子日歷的設計與實現(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>電子日歷的設計與實現(xiàn)</h3>
?? ??? ?<hr >
?? ??? ?<div id="calendar">
?? ??? ??? ?<!-- 狀態(tài)欄 -->
?? ??? ??? ?<div>
?? ??? ??? ??? ?<!-- 顯示“上個月”按鈕 -->
?? ??? ??? ??? ?<button onclick="lastMonth()">上個月</button>
?? ??? ??? ??? ?<!-- 顯示當前年份月份 -->
?? ??? ??? ??? ?<div id="month"></div>
?? ??? ??? ??? ?<!-- 顯示“下個月”按鈕 -->
?? ??? ??? ??? ?<button onclick="nextMonth()">下個月</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>
?? ??? ??? ?
?? ??? ??? ?<!-- 顯示當前月份每天的日期 -->
?? ??? ??? ?<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();
//獲取當前年份
var month=today.getMonth()+1;
//獲取當前月份
var day=today.getDate();
//獲取當前日期
var allday=0;
//當前月份的總天數(shù)
?
//用于推算當前月份一共多少天
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月份需要判斷當前是否為閏年
?? ??? ?if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
?? ??? ??? ?allday=29;
?? ??? ??? ?//閏年的2月份是29天
?? ??? ?}else{
?? ??? ??? ?allday=28;
?? ??? ??? ?//非閏年的2月份是28天
?? ??? ?}
?? ?}
}
?
//顯示日歷標題中的當前年份和月份
function showMonth(){
?? ?var year_month=year+"年"+month+"月";
?? ?document.getElementById("month").innerHTML=year_month;
}
?
//顯示當前月份的日歷
function showDate(){
?? ?showMonth();//在年份和月份的顯示牌上顯示當前的年月
?? ?count();//計算當前月份的總天數(shù)
?? ?
?? ?//獲取本月第一天的日期對象
?? ?var firstdate=new Date(year,month-1,1);
?? ?
?? ?//推算本月的第一天是星期幾
?? ?var xq=firstdate.getDay();
?? ?
?? ?//動態(tài)添加HTML元素
?? ?var daterow=document.getElementById("day");
?? ?daterow.innerHTML='';
?? ?
?? ?//如果本月的第一天不是星期日，則前面需要用空白元素補全日期
?? ?if (xq !=0){
?? ??? ?for (var i=0;i<xq;i++){
?? ??? ??? ?var dayElement=document.createElement('div');
?? ??? ??? ?dayElement.className='everyday';
?? ??? ??? ?daterow.appendChild(dayElement);
?? ??? ?}
?? ?}
?? ?
?? ?//使用循環(huán)語句將當前月份的所有日期顯示出來
?? ?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);
?? ?}
}
?
//顯示上個月的日歷
function lastMonth(){
?? ?if (month>1){
?? ??? ?month-=1;
?? ?}else{
?? ??? ?month=12;
?? ??? ?year-=1;
?? ?}
?? ?showDate();
}
?
//顯示下個月的日歷
function nextMonth(){
?? ?if (month<12){
?? ??? ?month+=1;
?? ?}else{
?? ??? ?month=1;
?? ??? ?year+=1;
?? ?}
?? ?showDate();
}

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

您可能感興趣的文章: