js+html+css實現簡單日歷效果

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

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

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

效果：

遇到的問題與解決方法：

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電子日歷的設計與實現</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>電子日歷的設計與實現</h3>
?? ??? ?<hr >
?? ??? ?<div id="calendar">
?? ??? ??? ?<!-- 狀態(tài)欄 -->
?? ??? ??? ?<div>
?? ??? ??? ??? ?<!-- 顯示“上個月”按鈕 -->
?? ??? ??? ??? ?<button onclick="lastMonth()">上個月</button>
?? ??? ??? ??? ?<!-- 顯示當前年份月份 -->
?? ??? ??? ??? ?<div id="month"></div>
?? ??? ??? ??? ?<!-- 顯示“下個月”按鈕 -->
?? ??? ??? ??? ?<button onclick="nextMonth()">下個月</button>
?? ??? ??? ??? ?<div> </div> <!--為了調節(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;
//當前月份的總天數
?
//用于推算當前月份一共多少天
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();//計算當前月份的總天數
?? ?
?? ?//獲取本月第一天的日期對象
?? ?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();
}

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

您可能感興趣的文章:

js
日歷

微信小程序下拉菜單效果的實例代碼
這篇文章主要介紹了微信小程序下拉菜單效果的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
QRCode.js二維碼生成并能長按識別
這篇文章主要為大家詳細介紹了QRCode.js二維碼生成并能長按識別，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
javascript appendChild,innerHTML,join性能比較代碼
在實際應用中，應該避免直接用innerHTML，對于大量的字符連接運算，應該考慮先運算再輸出。
2009-08-08
javascript格式化指定日期對象的方法
這篇文章主要介紹了javascript格式化指定日期對象的方法,涉及javascript針對日期對象操作的相關技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
js加解密腳本解密
利用js異或算法實現腳本加解密的代碼
2008-02-02
JS中箭頭函數與this的寫法和理解
這篇文章主要給大家介紹了關于JS中箭頭函數與this的寫法和理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
禁用頁面部分JavaScript方法的具體實現
方法重寫，重寫要禁用的方法，并讓它什么也不做，結果證明真的可行，但并不知道是不是一個科學的方法，我拿出來與大家共同討論一下
2013-07-07
解決微信內置瀏覽器返回上一頁強制刷新問題方法
微信內置瀏覽器在返回上一頁面，且上一頁面包含AJAX代碼時，頁面就會被強制刷新，極度影響用戶體驗。而我們想要的效果是：返回上一頁面時，頁面還停留在原來的狀態(tài)，AJAX獲取到的數據還在，滾動條也在原來的位置。下面跟著小編一起來看下吧
2017-02-02
原生js實現2048小游戲
這篇文章主要為大家詳細介紹了原生js實現2048小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
一文詳解axios四種傳參方式及后端接參
在開發(fā)的過程中,我們會經常使用到axios進行數據的交互,這篇文章主要給大家介紹了關于axios四種傳參方式及后端接參的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下
2023-10-10