搜尋
首頁web前端js教程原生js實作行事曆的想法與程式碼

本篇文章给大家带来的内容是关于原生js实现日历的思路与代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

demo效果:

原生js實作行事曆的想法與程式碼

实现日历的思路:

1、利用new Date()获取今天日期

2、判断今年是平年还是闰年,确定今年每个月有多少天

3、确定今天日期所在月的第一天是星期几

4、计算出日历的行数

5、利用今天日期所在月的天数与该月第一天星期几来渲染日历表格

6、左右切换月份

源码:

html

<div class="calendar-container">
    <div class="calendar-header">
        <div class="left btn"><</div>
        <div class="year"></div>
        <div class="right btn">></div>
    </div>
    <div class="calendar-body">
        <div class="week-row">
            <div class="week box">日</div>
            <div class="week box">一</div>
            <div class="week box">二</div>
            <div class="week box">三</div>
            <div class="week box">四</div>
            <div class="week box">五</div>
            <div class="week box">六</div>
        </div>
        <div class="day-rows">
            <!--日期的渲染的地方-->
        </div> 
    </div>
</div>

css

.calendar-container{
    width: calc(31px*7 + 1px);
    }
.calendar-header{
    display: flex;    
    justify-content: space-between;
    }
.year{
    text-align: center;    
    line-height: 30px;
    }
.btn{
    width: 30px;    
    height: 30px;    
    text-align: center;    
    line-height: 30px;    
    cursor: pointer;
    }
.calendar-body{
    border-right: 1px solid #9e9e9e;    
    border-bottom: 1px solid #9e9e9e;
    }
.week-row, 
.day-rows, 
.day-row{
    overflow: hidden;
    }
.box{
    float: left;    
    width: 30px;    
    height: 30px;    
    border-top: 1px solid #9e9e9e;    
    border-left: 1px solid #9e9e9e;    
    text-align: center;    
    line-height: 30px;
    }
.week{
    background: #00bcd4;
    }
.day{
    background: #ffeb3b;
    }
.curday{ 
   background: #ff5722;
   }

js

// 获取今天日期
let curTime = new Date(),
    curYear = curTime.getFullYear(),
    curMonth = curTime.getMonth(),
    curDate = curTime.getDate();
    console.log(curTime, curYear, curMonth, curDate)
    // 判断平年还是闰年
    function isLeapYear(year){    
    return (year%400 === 0) || ((year%4 === 0) && (year%100 !== 0))
}
function render(curYear, curMonth){    
document.querySelector(&#39;.year&#39;).innerHTML = `${curYear}年${curMonth + 1}月`;    
// 判断今年是平年还是闰年,并确定今年的每个月有多少天    
let daysInMonth = [31, isLeapYear(curYear) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];    
// 确定今天日期所在月的第一天是星期几    
let firstDayInMonth = new Date(curYear, curMonth, 1),
        firstDayWeek = firstDayInMonth.getDay();    
        // 根据当前月的天数和当前月第一天星期几来确定当前月的行数    
        let calendarRows = Math.ceil((firstDayWeek + daysInMonth[curMonth])/7);    
        // 将每一行的日期放入到rows数组中    
        let rows = [];    
        // 外循环渲染日历的每一行    
        for(let i = 0; i < calendarRows; i++){
        rows[i] = `<p class="day-row">`;        
        // 内循环渲染日历的每一天        
        for(let j = 0; j < 7; j++){            
        // 内外循环构成了一个calendarRows*7的表格,为当前月的每个表格设置idx索引;            
        // 利用idx索引与当前月第一天星期几来确定当前月的日期            
        let idx = i*7 + j,
                date = idx - firstDayWeek + 1;            
                // 过滤掉无效日期、渲染有效日期            
                if(date <= 0 || date > daysInMonth[curMonth]){
                rows[i] += `<p class="day box"></p>`
            }else if(date === curDate){
                rows[i] += `<p class="day box curday">${date}</p>`
            }else{
                rows[i] += `<p class="day box">${date}</p>`
            }
        }
        rows[i] += `</p>`
    }    let dateStr = rows.join(&#39;&#39;);    
    document.querySelector(&#39;.day-rows&#39;).innerHTML = dateStr;
}
// 首次调用render函数
render(curYear, curMonth);
let leftBtn = document.querySelector(&#39;.left&#39;),
    rightBtn = document.querySelector(&#39;.right&#39;);
    // 向左切换月份
leftBtn.addEventListener(&#39;click&#39;, function(){
    curMonth--;    
    if(curMonth < 0){
        curYear -= 1;
        curMonth = 11;
    }
    render(curYear, curMonth);
})
// 向右切换月份
rightBtn.addEventListener(&#39;click&#39;, function(){
    curMonth++;    
    if(curMonth > 11){
        curYear += 1;
        curMonth = 0;
    }
    render(curYear, curMonth);
})

小结:

1、为了实现左右切换月份,将日历日期渲染代码放入到了render函数,方便月份切换后重新渲染;

2、确定当前月的行数时,要结合当前月的天数与当前月第一天星期几来共同确定;

3、原生js日历中比较核心的就是如何确定每一天的日期,在这儿利用了内外循环,内外循环构成了一个calendarRows*7的表格,为当前月的每个表格设置idx索引;利用idx索引与当前月第一天星期几来确定当前月的日期;记得要过滤掉无效日期!!!

相关推荐:

JS日历 推荐_时间日期

推荐一个小巧的JS日历_时间日期

以上是原生js實作行事曆的想法與程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
win11双屏幕日历在第二台显示器上不存在怎么办?win11双屏幕日历在第二台显示器上不存在怎么办?Jun 12, 2024 pm 05:47 PM

在Windows11中组织日常工作和例行公事的一项重要工具是在任务栏中显示时间和日期。此功能通常位于屏幕的右下角,可让您即时访问时间和日期。通过单击此区域,您可以调出日历,从而更轻松地检查即将到来的约会和日期,而无需打开单独的应用程序。但是,如果您使用多个显示器,则此功能可能会遇到问题。具体来说,虽然时钟和日期显示在所有连接的显示器上的任务栏上,但单击第二个显示器上的日期和时间来显示日历的功能不可用。截至目前,此功能仅在主显示屏上起作用-它与Windows10不同,在Windows10中,单击任

win10日历显示周数win10日历显示周数Jan 04, 2024 am 08:41 AM

很多用户们想要通过win10日历这个工具来查看当前天数,但是日历不会自动显示这一功能,其实我们只需要通过简单的设置,就能够看到今年的累计周数了哦~win10日历显示周数设置教程:1、在桌面左下角的搜索中输入日历并且打开应用。2、在打开的日历应用中,点击左下角的“齿轮”图标后,会在右侧弹出设置,我们点击“日历设置”3、继续在打开的日历设置中,找到“周数”然后将周数选项调整到“一年中的第一天”即可。4、在完成以上设置后,点击“周”即可看到今年的周数统计了。

Outlook日历不同步;Outlook日历不同步;Mar 26, 2024 am 09:36 AM

如果您的Outlook日历无法与Google日历、Teams、iPhone、Android、Zoom、Office帐户等同步,请执行以下步骤来解决问题。日历应用程序可以连接到其他日历服务,如谷歌日历、iPhone、安卓、微软Office365等,这是非常有用的,因为它可以自动同步。但如果OutlookCalendar无法与第三方日历同步怎么办?可能的原因可能是选择错误的日历进行同步,日历不可见,后台应用程序干扰,过时的Outlook应用程序或日历应用程序,等等。修复Outlook日历不同步的初步

win10日历事件没有弹窗提醒怎么办? win10日历事件提醒没了的恢复方法win10日历事件没有弹窗提醒怎么办? win10日历事件提醒没了的恢复方法Jun 09, 2024 pm 02:52 PM

日历可以帮助用户们记录下你的行程,甚至还可以设置提醒,但是也有不少的用户们在询问win10日历事件提醒不弹出怎么办?用户们可以先检查一下windows更新情况或者是清除windows应用商店缓存来进行操作就可以了。下面就让本站来为用户们来仔细的介绍一下win10日历事件提醒不弹出问题解析吧。添加日历事件在系统菜单中点击“日历”程序。鼠标左键点击日历中的日期。在编辑窗口输入事件名称和提醒时间,点击“保存”按钮即可添加事件了。win10日历事件提醒不弹出问题解决

无期迷途采购办:日历和生日系列周边上新!无期迷途采购办:日历和生日系列周边上新!Feb 29, 2024 pm 12:00 PM

无期迷途采购办确定将于2月28日上午11点更新,玩家可以前往淘宝搜索无期迷途采购办选择店铺分类进行购买,本次为大家带来的是MBCC生日会系列及2024台历周边,一起来看看本次的商品详情。无期迷途采购办:日历和生日系列周边上新!无期迷途采购办上新!—预售时间:2024年2月28日11:00——2024年3月13日23:59采购地址:淘宝搜索【无期迷途采购办】选择【店铺】分类即可进店采购;周边介绍:本次周边上新为MBCC生日会系列及2024台历周边,请点击长图查阅详情。采购办上新周边介绍—MBCC生

无法打开win10右下角的日历无法打开win10右下角的日历Dec 26, 2023 pm 05:07 PM

有使用win0系统的小伙伴有遇见win10日历打不开的情况,这个是正常的电脑的小故障而已,在win10系统的隐私设置里可以解决,今天小编带来了详细的解决方法,下面大家一起来看看吧。win10右下角的日历打不开解决方法1、在win10系统中点击开始→点击上方的程序列表按钮→往下找到拼音(中文)R→日历2、初次使用,可能新事件会点不开(鼠标靠上去,不会有选中的深蓝色),可以在隐私中设置一下。点击桌面左上方的三道杠图标→底部就会有设置菜单;3、在弹出的界面中点击隐私;4、如果之前使用过设置,可以点击左

win11时间老是不准确怎么解决?Win11时间调整教程快速解决时间不准确问题win11时间老是不准确怎么解决?Win11时间调整教程快速解决时间不准确问题Apr 19, 2024 am 09:31 AM

如果您的Windows11计算机显示时间错误,可能会导致很多问题,甚至阻止您连接到互联网。事实上,当系统显示不正确的日期和时间时,某些应用程序会拒绝打开或运行。那么应该如何解决这个问题呢?下面一起来看看吧!方法一:1、我们首先右键点击下方任务栏空白处,选择任务栏设置2、在任务栏设置中找到右侧的taskbarcorneroverflow3、然后在它上方找到clock或时钟选择开启即可。方法二:1、按下键盘快捷键win+r调出运行,输入regedit回车确定。2、打开注册表编辑器,在其中找到HKEY

如何设置Windows 10的日历如何设置Windows 10的日历Dec 22, 2023 pm 12:21 PM

win10日历是一款非常好用的系统自带日历功能软件,这款日历功能可以帮助我们随时随地查看日期,如果有需要的话,还能够设置农历等,查看当前是今年的第几周等,非常方便哦~win10日历怎么设置:1、在菜单界面搜索“日历”进入界面。如果提示绑定账户,点击“转到日历”即可跳过。2、点击左下角一排的“齿轮”按钮,右边会自动弹出设置界面,我们就能够进行设置了。win10日历常见问题解答日历在哪设置中文怎么放在桌面日历显示周数日历快捷键日历备忘录同步到手机无法同步咋办怎么显示农历怎么导出日历个性化设置设置周日

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。