HTML+CSS+JavaScript實現(xiàn)簡單日歷效果
更新時間：2022年07月04日 09:43:19 作者：@半島鐵盒@
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了HTML+CSS+JavaScript實現(xiàn)簡單日歷效果的具體代碼，供大家參考，具體內容如下
初學前端花了一下午寫了一個簡單的日歷效果：
可以選擇按月或者按年切換，當前日期會有綠色的背景顯示， 所有的日期都會正確的對應星期幾。
所有代碼：
<!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為選擇了年（添加文本陰影）
?
? ? ? ? // 更新當前年
? ? ? ? let yearNow = document.getElementById("year");
? ? ? ? yearNow.innerHTML = Y;
? ? ? ? // 更新當前月
? ? ? ? let monthNow = document.getElementById("month");
? ? ? ? monthNow.innerHTML = monthAndMaxDay(Y, M)[0];
? ? ? ? // 判斷選中年還是月（添加文本陰影）
? ? ? ? selected(isSelect);
? ? ? ? //更新當前日
? ? ? ? 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); });
? ? ? ??
? ? ? ? // 按日查詢對應的星期幾
? ? ? ? function dayToStar(year, month, day) {
? ? ? ? ? ? let theDate = new Date(year, month, day);
? ? ? ? ? ? return theDate.getDay();
? ? ? ? }
?
? ? ? ? // 查詢一個月對應的英文命名和最大天數(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];
? ? ? ? }
?
? ? ? ? // 更新當前月的所有天數(shù)
? ? ? ? function updateAllDays(year, month) {
? ? ? ? ? ? let offset = dayToStar(year, month, 1);
? ? ? ? ? ? let maxDay = monthAndMaxDay(year, month)[1];
? ? ? ? ? ??
? ? ? ? ? ? // 實現(xiàn)日期和星期對應
? ? ? ? ? ? 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();
? ? ? ? ? ? ? ? // 當前日期有綠色背景
? ? ? ? ? ? ? ? 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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇layui table 表格上添加日期控件的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
今天小編就為大家分享一篇關于解決微信小程序中轉換時間格式IOS不兼容的問題，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
經(jīng)常在一些博客中看到有一個打賞功能，本篇文章主要介紹了博客打賞功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-10-10
這篇文章主要介紹了js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
JavaScript實現(xiàn)簡易放大鏡最全代碼解析(ES5)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易放大鏡最全代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript獲取鼠標移動時的坐標(兼容IE8、chome谷歌、Firefox)
這篇文章主要介紹了JavaScript獲取鼠標移動時的坐標(兼容IE8、chome谷歌、Firefox瀏覽器),需要的朋友可以參考下2014-09-09
JavaScript?canvas實現(xiàn)水球加載動畫
這篇文章主要為大家詳細介紹了JavaScript?canvas實現(xiàn)水球加載動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript 監(jiān)聽組合按鍵思路及代碼實現(xiàn)
這篇文章主要介紹了JavaScript 監(jiān)聽組合按鍵思路及代碼實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
javascript?實現(xiàn)純前端將數(shù)據(jù)導出excel兩種方式
這篇文章主要介紹了javascript?實現(xiàn)純前端將數(shù)據(jù)導出excel兩種方式，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參一下2022-07-07
js實現(xiàn)hashtable的賦值、取值、遍歷操作實例詳解
這篇文章主要介紹了js實現(xiàn)hashtable的賦值、取值、遍歷操作,結合實例形式分析了哈希表的原理、哈希鍵值對操作相關技巧,需要的朋友可以參考下2016-12-12