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

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

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

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

效果：

遇到的問(wèn)題與解決方法：

1.“日”上移

方法：在“下個(gè)月”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電子日歷的設(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: