HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果
更新時(shí)間：2022年07月04日 09:43:19 作者：@半島鐵盒@
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
初學(xué)前端花了一下午寫了一個(gè)簡(jiǎn)單的日歷效果：
可以選擇按月或者按年切換，當(dāng)前日期會(huì)有綠色的背景顯示， 所有的日期都會(huì)正確的對(duì)應(yīng)星期幾。
所有代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>簡(jiǎn)單日歷效果</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? }
? ? ? ? ul {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? display: block;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? background-color: rgb(236, 195, 202);
? ? ? ? }
?
? ? ? ? .cal-container .year-month>div:first-child>span,
? ? ? ? .cal-container .year-month .pre,
? ? ? ? .cal-container .year-month .next,
? ? ? ? .cal-container .weeks>ul>li,
? ? ? ? .cal-container .days>ul .style-default {
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .cal-container .year-month .pre:hover,
? ? ? ? .cal-container .year-month .next:hover,
? ? ? ? .cal-container .weeks>ul>li:hover {
? ? ? ? ? ? text-shadow: 2px 2px 2px rgb(121, 121, 121);
? ? ? ? }
?
? ? ? ? .cal-container {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 20%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? margin-left: -300px;
? ? ? ? ? ? box-shadow: 7px 7px 7px rgb(112, 112, 112);
? ? ? ? ? ? background-color: aquamarine;
? ? ? ? }
? ? ? ? .cal-container .year-month {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 250px;
? ? ? ? ? ? background-color: rgb(107, 215, 168);
? ? ? ? }
? ? ? ? .cal-container .year-month>div:first-child {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 70px;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? letter-spacing: 3px;
? ? ? ? }
? ? ? ? .cal-container .year-month>div:first-child>span {
? ? ? ? ? ? display: block;
? ? ? ? ? ? margin-bottom: 5px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? ? ? color: white;?
? ? ? ? }
? ? ? ? .cal-container .year-month>div:first-child>span:first-child {
? ? ? ? ? ? font-size: 40px;
? ? ? ? }
? ? ? ? .cal-container .year-month>div:first-child>span:last-child {
? ? ? ? ? ? font-size: 25px;
? ? ? ? }
? ? ? ? .cal-container .year-month .pre,
? ? ? ? .cal-container .year-month .next {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? transform: translateY(-20px);
? ? ? ? ? ? margin: 0 20px;
? ? ? ? ? ? font-size: 40px;
? ? ? ? ? ? color: white;
? ? ? ? }
? ? ? ? .cal-container .year-month .next {
? ? ? ? ? ? right: 0;
? ? ? ? }
?
? ? ? ? .cal-container .weeks>ul,
? ? ? ? .cal-container .days>ul {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? flex-wrap: wrap;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? padding: 0 2.5px;
? ? ? ? ? ? background-color: rgb(202, 202, 202);
? ? ? ? }
? ? ? ? .cal-container .days>ul {
? ? ? ? ? ? padding: 20px 0;
? ? ? ? ? ? background-color: rgb(225, 225, 225);
? ? ? ? }
? ? ? ? .cal-container .weeks>ul>li {
? ? ? ? ? ? width: 85px;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? ? ? color: rgb(75, 75, 75);
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 50px;
? ? ? ? }
?
? ? ? ? .style-default {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? margin: 0 17.5px;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? ? ? color: rgb(75, 75, 75);
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 50px;
? ? ? ? }
? ? ? ? .days>ul .style-default:hover {
? ? ? ? ? ? background-color: rgb(202, 202, 202);
? ? ? ? }
? ? ? ? .cal-container .days>ul .bg-style {
? ? ? ? ? ? background-color: rgb(107, 215, 168);
? ? ? ? }
? ? ? ? .no-style {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? margin: 0 17.5px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="cal-container">
? ? ? ? <div class="year-month">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <span id="month"></span>
? ? ? ? ? ? ? ? <span id="year"></span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="pre" id="pre-month"><</div>
? ? ? ? ? ? <div class="next" id="next-month">></div>
? ? ? ? </div>
? ? ? ? <div class="weeks">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>Mon</li>
? ? ? ? ? ? ? ? <li>Tue</li>
? ? ? ? ? ? ? ? <li>Wed</li>
? ? ? ? ? ? ? ? <li>Thu</li>
? ? ? ? ? ? ? ? <li>Fri</li>
? ? ? ? ? ? ? ? <li>Sat</li>
? ? ? ? ? ? ? ? <li>Sun</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <div class="days">
? ? ? ? ? ? <ul id="day"></ul>
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? // 獲取年月日和星期幾
? ? ? ? let date = new Date();
? ? ? ? Y = date.getFullYear();
? ? ? ? M = date.getMonth();
? ? ? ? W = date.getDay();
? ? ? ? D = date.getDate();
? ? ? ? isSelect = true; ? ?//true為選擇了月，false為選擇了年（添加文本陰影）
?
? ? ? ? // 更新當(dāng)前年
? ? ? ? let yearNow = document.getElementById("year");
? ? ? ? yearNow.innerHTML = Y;
? ? ? ? // 更新當(dāng)前月
? ? ? ? let monthNow = document.getElementById("month");
? ? ? ? monthNow.innerHTML = monthAndMaxDay(Y, M)[0];
? ? ? ? // 判斷選中年還是月（添加文本陰影）
? ? ? ? selected(isSelect);
? ? ? ? //更新當(dāng)前日
? ? ? ? let days = document.getElementById("day");
? ? ? ? updateAllDays(Y, M);
?
? ? ? ? // 選擇按月切換還是按年切換
? ? ? ? yearNow.addEventListener("click", function() {?
? ? ? ? ? ? isSelect = false
? ? ? ? ? ? selected(isSelect);?
? ? ? ? });
? ? ? ? monthNow.addEventListener("click", function() {?
? ? ? ? ? ? isSelect = true;
? ? ? ? ? ? selected(isSelect);?
? ? ? ? });
? ? ? ??
? ? ? ? // 左右切換日期
? ? ? ? let previous = document.getElementById("pre-month");
? ? ? ? previous.addEventListener("click", function() { changePage(true); });
? ? ? ? let next = document.getElementById("next-month");
? ? ? ? next.addEventListener("click", function() { changePage(false); });
? ? ? ??
? ? ? ? // 按日查詢對(duì)應(yīng)的星期幾
? ? ? ? function dayToStar(year, month, day) {
? ? ? ? ? ? let theDate = new Date(year, month, day);
? ? ? ? ? ? return theDate.getDay();
? ? ? ? }
?
? ? ? ? // 查詢一個(gè)月對(duì)應(yīng)的英文命名和最大天數(shù)
? ? ? ? function monthAndMaxDay(year, month) {
? ? ? ? ? ? let month_now = "";
? ? ? ? ? ? let maxDay = 0; ? ? // 一個(gè)月的最大天數(shù)
? ? ? ? ? ? switch(month+1) {
? ? ? ? ? ? ? ? case 1: month_now = "一月"; maxDay = 31; break;
? ? ? ? ? ? ? ? case 2:?
? ? ? ? ? ? ? ? ? ? month_now = "二月";
? ? ? ? ? ? ? ? ? ? if(year % 4 == 0) {
? ? ? ? ? ? ? ? ? ? ? ? maxDay = 29;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? maxDay = 28;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 3: month_now = "三月"; maxDay = 31; break;
? ? ? ? ? ? ? ? case 4: month_now = "四月"; maxDay = 30; break;
? ? ? ? ? ? ? ? case 5: month_now = "五月"; maxDay = 31; break;
? ? ? ? ? ? ? ? case 6: month_now = "六月"; maxDay = 30; break;
? ? ? ? ? ? ? ? case 7: month_now = "七月"; maxDay = 31; break;
? ? ? ? ? ? ? ? case 8: month_now = "八月"; maxDay = 31; break;
? ? ? ? ? ? ? ? case 9: month_now = "九月"; maxDay = 30; break;
? ? ? ? ? ? ? ? case 10: month_now = "十月"; maxDay = 31; break;
? ? ? ? ? ? ? ? case 11: month_now = "十一月"; maxDay = 30; break;
? ? ? ? ? ? ? ? case 12: month_now = "十二月"; maxDay = 31; break;
? ? ? ? ? ? ? ? default: month = "";
? ? ? ? ? ? }
? ? ? ? ? ? return [month_now, maxDay];
? ? ? ? }
?
? ? ? ? // 更新當(dāng)前月的所有天數(shù)
? ? ? ? function updateAllDays(year, month) {
? ? ? ? ? ? let offset = dayToStar(year, month, 1);
? ? ? ? ? ? let maxDay = monthAndMaxDay(year, month)[1];
? ? ? ? ? ??
? ? ? ? ? ? // 實(shí)現(xiàn)日期和星期對(duì)應(yīng)
? ? ? ? ? ? for(let i=0; i<offset; i++) {
? ? ? ? ? ? ? ? let day = document.createElement("li");
? ? ? ? ? ? ? ? day.className = "no-style";
? ? ? ? ? ? ? ? days.appendChild(day);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? for(let i=1; i<=maxDay; i++) {
? ? ? ? ? ? ? ? let day = document.createElement("li");
? ? ? ? ? ? ? ? let dateNow = new Date();
? ? ? ? ? ? ? ? // 當(dāng)前日期有綠色背景
? ? ? ? ? ? ? ? if(year == dateNow.getFullYear() && month == dateNow.getMonth() && i == dateNow.getDate()) {
? ? ? ? ? ? ? ? ? ? day.className = "style-default bg-style"
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? day.className = "style-default";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? day.id = i;
? ? ? ? ? ? ? ? day.innerText = i
? ? ? ? ? ? ? ? days.appendChild(day);
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 選擇按月切換還是按年切換
? ? ? ? function selected(boolean) {
? ? ? ? ? ? if(boolean) {
? ? ? ? ? ? ? ? monthNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";
? ? ? ? ? ? ? ? yearNow.style.textShadow = "none";
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? monthNow.style.textShadow = "none";
? ? ? ? ? ? ? ? yearNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? ? ? // 點(diǎn)擊切換事件
? ? ? ? function changePage(boolean) {
? ? ? ? ? ? // 按年切換還是按月切換
? ? ? ? ? ? if(isSelect) {
? ? ? ? ? ? ? ? // 向前切換還是向后切換
? ? ? ? ? ? ? ? if(boolean) {
? ? ? ? ? ? ? ? ? ? M = M-1;
? ? ? ? ? ? ? ? ? ? if(M == -1) {
? ? ? ? ? ? ? ? ? ? ? ? Y--;
? ? ? ? ? ? ? ? ? ? ? ? M = 11;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? M = M+1;
? ? ? ? ? ? ? ? ? ? if(M == 11) {
? ? ? ? ? ? ? ? ? ? ? ? Y++;
? ? ? ? ? ? ? ? ? ? ? ? M = 0;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? if(boolean) {
? ? ? ? ? ? ? ? ? ? Y--;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? Y++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? yearNow.innerHTML = Y;
? ? ? ? ? ? monthNow.innerHTML = monthAndMaxDay(Y, M)[0];
? ? ? ? ? ? // 清空一個(gè)月所有天數(shù)
? ? ? ? ? ? days.innerHTML = "";
? ? ? ? ? ? // 重新添加一個(gè)月所有天數(shù)
? ? ? ? ? ? updateAllDays(Y, M);
? ? ? ? }
? ? ? ? </script>
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于Bootstrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能
本文給大家介紹基于Metronic的Bootstrap開發(fā)框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
uniapp小程序自定義tabbar以及初次加載閃屏解決方法
Uniapp小程序可以通過自定義tabbar來實(shí)現(xiàn)更加個(gè)性化的界面設(shè)計(jì),下面這篇文章主要給大家介紹了關(guān)于uniapp小程序自定義tabbar以及初次加載閃屏解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
在Chrome DevTools中調(diào)試JavaScript的實(shí)現(xiàn)
這篇文章主要介紹了在Chrome DevTools中調(diào)試JavaScript的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
本文主要介紹使用javacript獲取當(dāng)前屏幕大小的方法，需要的朋友可以參考下。2016-06-06
Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果
餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡(jiǎn)單,這篇文章主要給大家介紹了關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果的相關(guān)資料,文中還介紹了echarts餅圖外部陰影設(shè)置的方法,需要的朋友可以參考下2024-02-02
Javascript連接Access數(shù)據(jù)庫(kù)完整實(shí)例
這篇文章主要介紹了Javascript連接Access數(shù)據(jù)庫(kù)的方法,涉及javascript針對(duì)access數(shù)據(jù)庫(kù)的連接、關(guān)閉及增刪改查等常用操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)echarts水球圖百分比展示大屏可視化
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)echarts水球圖百分比展示大屏可視化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了JS判斷點(diǎn)是否在線段上的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
JS+WCF實(shí)現(xiàn)進(jìn)度條實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)加載量的方法詳解
這篇文章主要介紹了JS+WCF實(shí)現(xiàn)進(jìn)度條實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)加載量的方法,結(jié)合實(shí)例形式分析了大量數(shù)據(jù)導(dǎo)入過程中前臺(tái)js與后臺(tái)WCF交互實(shí)現(xiàn)實(shí)時(shí)顯示加載進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12