HTML+CSS+JavaScript實現(xiàn)簡單日歷效果
更新時間：2022年07月04日 09:43:19 作者：@半島鐵盒@
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了HTML+CSS+JavaScript實現(xiàn)簡單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
初學(xué)前端花了一下午寫了一個簡單的日歷效果：
可以選擇按月或者按年切換，當(dāng)前日期會有綠色的背景顯示， 所有的日期都會正確的對應(yīng)星期幾。
所有代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>簡單日歷效果</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); });
? ? ? ??
? ? ? ? // 按日查詢對應(yīng)的星期幾
? ? ? ? function dayToStar(year, month, day) {
? ? ? ? ? ? let theDate = new Date(year, month, day);
? ? ? ? ? ? return theDate.getDay();
? ? ? ? }
?
? ? ? ? // 查詢一個月對應(yīng)的英文命名和最大天數(shù)
? ? ? ? function monthAndMaxDay(year, month) {
? ? ? ? ? ? let month_now = "";
? ? ? ? ? ? let maxDay = 0; ? ? // 一個月的最大天數(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];
? ? ? ? ? ??
? ? ? ? ? ? // 實現(xiàn)日期和星期對應(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)";
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? ? ? // 點擊切換事件
? ? ? ? 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];
? ? ? ? ? ? // 清空一個月所有天數(shù)
? ? ? ? ? ? days.innerHTML = "";
? ? ? ? ? ? // 重新添加一個月所有天數(shù)
? ? ? ? ? ? updateAllDays(Y, M);
? ? ? ? }
? ? ? ? </script>
</body>
</html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于Bootstrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能
本文給大家介紹基于Metronic的Bootstrap開發(fā)框架實現(xiàn)頁面鏈接收藏夾功能，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
uniapp小程序自定義tabbar以及初次加載閃屏解決方法
Uniapp小程序可以通過自定義tabbar來實現(xiàn)更加個性化的界面設(shè)計,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序自定義tabbar以及初次加載閃屏解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
在Chrome DevTools中調(diào)試JavaScript的實現(xiàn)
這篇文章主要介紹了在Chrome DevTools中調(diào)試JavaScript的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)多文件拖動上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
本文主要介紹使用javacript獲取當(dāng)前屏幕大小的方法，需要的朋友可以參考下。2016-06-06
Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果
餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡單,這篇文章主要給大家介紹了關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果的相關(guān)資料,文中還介紹了echarts餅圖外部陰影設(shè)置的方法,需要的朋友可以參考下2024-02-02
Javascript連接Access數(shù)據(jù)庫完整實例
這篇文章主要介紹了Javascript連接Access數(shù)據(jù)庫的方法,涉及javascript針對access數(shù)據(jù)庫的連接、關(guān)閉及增刪改查等常用操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JavaScript實現(xiàn)echarts水球圖百分比展示大屏可視化
這篇文章主要為大家介紹了JavaScript實現(xiàn)echarts水球圖百分比展示大屏可視化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了JS判斷點是否在線段上的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
JS+WCF實現(xiàn)進(jìn)度條實時監(jiān)測數(shù)據(jù)加載量的方法詳解
這篇文章主要介紹了JS+WCF實現(xiàn)進(jìn)度條實時監(jiān)測數(shù)據(jù)加載量的方法,結(jié)合實例形式分析了大量數(shù)據(jù)導(dǎo)入過程中前臺js與后臺WCF交互實現(xiàn)實時顯示加載進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12