使用纯原生JS实现日历
2024-06-30 07:54:18
废话不多说，该有的注释都在代码里了；直接上代码：
HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>促销日历</title><!-- Bootstrap --><link href="../static/js/bootstarp/css/bootstrap.min.css" rel="stylesheet"><link href="../static/icon/iconfont.css" rel="stylesheet"><script src="../static/js/jquery/jquery-3.4.1.min.js"></script><script src="../static/js/bootstarp/js/bootstrap.min.js"></script>
</head>
<style>/*标题样式*/.title_div {padding-top: 8px;padding-bottom: 8px;border-bottom: #8c8c8c 1px solid;}.title_div_div {text-align: center;font-size: 20px;}/*当前日期*/.now_time {background-color: #FFEBF0;padding-top: 10px;padding-bottom: 10px;text-align: center;}/*日历样式*/.calendar {padding: 10px;background-color: #E9E9E9;}/*当前月份*/.month_year {font-size: 18px;background-color: #F3F3F3;text-align: center;padding-top: 5px;padding-bottom: 5px;}/*星期*/.week {background-color: #CACACA;padding: 7px;text-align: center;}/*单个日期的样式 取代除以七除不尽的问题*/.single_seven {width: 14.28571428%;float: left;}.day {border-right: #DCDCDC 1px solid;}/*日期的样式*/.single_day {border-bottom: #DCDCDC 1px solid;border-left: #DCDCDC 1px solid;text-align: left;background-color: #ffffff;padding-bottom: 15px;}/*促销列表标题*/.promotion_title {padding-top: 5px;padding-bottom: 5px;border-bottom: #8c8c8c 1px solid;}/*返回按钮*/.back_btn {font-size: 25px;}/*粉色按钮*/.pink_font {color: #FF92AD;}/*没有促销信息的*/.no_promotion_icon {font-size: 50px;}/*今天样式*/.today_div {background-color: #FFEEDE;}
</style>
<body>
<div class="container-fluid"><!-- 标题 --><div class="row title_div"><div class="col-xs-2"><span class="iconfont back_btn"></span></div><div class="col-xs-10 title_div_div"><span>门店促销日历</span></div></div><!-- 当前时间 --><div class="row now_time"><div class="col-xs-6"><span class="iconfont pink_font"></span><span id="today_day"></span></div><div class="col-xs-6" id="go_back_today"><span class="iconfont pink_font"></span> 回今天</div></div><!-- 日历 --><div class="row calendar "><div class="col-xs-12"><!-- 当前月 --><div class="row month_year"><div class="col-xs-4" id='show_last_month'><span class="iconfont"></span></div><div class="col-xs-4"><span id="current_month"></span></div><div class="col-xs-4" id='show_next_month'><span class="iconfont"></span></div></div><!-- 星期 --><div class="row week"><div class="single_seven">日</div><div class="single_seven">一</div><div class="single_seven">二</div><div class="single_seven">三</div><div class="single_seven">四</div><div class="single_seven">五</div><div class="single_seven">六</div></div><!-- 日子 --><div id="calendar_day"></div></div></div><div class="row promotion_title"><div class="col-xs-12"><span><span class="iconfont pink_font"></span> 促销列表</span></div></div><div style="text-align: center"><span class="iconfont pink_font no_promotion_icon"></span><br/>暂无数据</div>
</div>
</body>
<script src="../static/js/custom/promotion_calendar.js"></script>
</html>JS:
/*是否是闰年*/
function leapYear(year) {/*维基百科闰年定义：公元年分除以4不可整除，为平年。公元年分除以4可整除但除以100不可整除，为闰年。公元年分除以100可整除但除以400不可整除，为平年。公元年分除以400可整除但除以3200不可整除，为闰年。*/return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0 && year % 320 === 0);
}/*获取一个月有多少天*/
function getMonthLength(year, month) {/*前七个月是偶数为小 奇数为大 二月比较特殊*/// 是否是二月if (month === 2) {// 是否是闰年if (leapYear(year)) {// 是闰年 二月只有28天return 28;} else {// 平年 二月有29天return 29;}}// 前七个月偶数是小月 后5个月偶数是大月if ((month < 8 && month % 2 === 0) || (month > 7 && month % 2 !== 0)) {// 小月return 30;} else {// 大月return 31;}
}/*获取第一天是星期几*/
function getFistDayWeekInMonth(year, month) {// 获取当前时间对象let date = new Date();/*设置年份和月份*/// 年
date.setFullYear(year);// 月date.setMonth(month - 1);// 日date.setDate(1);// 获取星期数return date.getDay() + 1;
}/*设置日历*/
function setCalendar(year, month) {// 获取日历对象let calender = document.getElementById('calendar_day');// 移除所有的子节点calender.innerHTML = '';// 是否显示今天let now = new Date();let thisYear = now.getFullYear();let thisMonth = now.getMonth() + 1;let thisDay = now.getDate();let showToday = thisYear === year && month === thisMonth;// 常量const weeks = 6;const weekDay = 7;// 获取第一天星期几let fistDayWeek = getFistDayWeekInMonth(year, month);// 获取这月的长度let monthLength = getMonthLength(year, month);// 定义临时标签
let weekDiv;let singleDayDiv;let singleDayDivText;let loopDay = -fistDayWeek + 2;for (let i = 0; i < weeks; i++) {// 创建外部DivweekDiv = document.createElement('div');// 添加样式weekDiv.className = 'row day';for (let j = 0; j < weekDay; j++) {/*如果是第一周 则要考虑 第一天星期几的问题*/if ((i === 0 && j < fistDayWeek - 1) || loopDay > monthLength) {// 添加空元素// 如果最后一周的第一天是空的 则退出循环if (i > 0 && j === 0) {break;}singleDayDivText = document.createElement('br');} else {singleDayDivText = document.createTextNode(loopDay);}// 创建单天divsingleDayDiv = document.createElement('div');// 添加文本内容
singleDayDiv.appendChild(singleDayDivText);// 添加样式if (showToday && thisDay === loopDay) {singleDayDiv.className = 'single_seven single_day today_div';} else {singleDayDiv.className = 'single_seven single_day';}// 将生成的单天放到最外部的div中
weekDiv.appendChild(singleDayDiv);// 将生成的div放到日历div中
calender.appendChild(weekDiv);loopDay++;}}
}/*上一个月*/
function showLastMonth() {// 获取文本内容let text = document.getElementById('current_month').innerHTML;// 获取年月let monthYearArray = text.split('月');let currentMonth = Number(monthYearArray[0]);let currentYear = Number(monthYearArray[1]);// 如果是1月 则要进入到去年的12月if (currentMonth === 1) {currentYear--;currentMonth = 12;} else {currentMonth--;}setCalendar(currentYear, currentMonth);// 设置月份显示document.getElementById('current_month').innerHTML = currentMonth + '月 ' + currentYear;
}/*下一个月*/
function showNextMonth() {// 获取文本内容let text = document.getElementById('current_month').innerHTML;// 获取年月let monthYearArray = text.split('月');let currentMonth = Number(monthYearArray[0]);let currentYear = Number(monthYearArray[1]);// 如果是12月 则要进入到明年的1月if (currentMonth === 12) {currentYear++;currentMonth = 1;} else {currentMonth++;}setCalendar(currentYear, currentMonth);// 设置月份显示document.getElementById('current_month').innerHTML = currentMonth + '月 ' + currentYear;
}// 给按钮添加事件
function addListen2Element() {// 上个月document.getElementById('show_last_month').addEventListener('click', showLastMonth);// 下个月document.getElementById('show_next_month').addEventListener('click', showNextMonth);// 回今天document.getElementById('go_back_today').addEventListener('click', goBackToday);
}/*回到今天*/
function goBackToday() {// 获取文本内容let text = document.getElementById('current_month').innerHTML;// 获取年月let monthYearArray = text.split('月');let currentMonth = Number(monthYearArray[0]);let currentYear = Number(monthYearArray[1]);// 获取当前时间let now = new Date();// 获取当前年份let thisYear = now.getFullYear();// 获取当前月份let thisMonth = now.getMonth() + 1;// 如果当前时间和现在时间相同则不从新渲染if (thisYear === currentYear && thisMonth === currentMonth) {return;}setCalendar(thisYear, thisMonth);// 设置月份显示document.getElementById('current_month').innerHTML = thisMonth + '月 ' + thisYear;
}/*本月日历*/
function setThisMonthCalendar() {// 获取当前时间对象let nowTime = new Date();// 获取年let year = nowTime.getFullYear();// 获取月let month = nowTime.getMonth() + 1;// 获取天let day = nowTime.getDate();// 开始渲染日历
setCalendar(year, month,);// 设置月份显示document.getElementById('current_month').innerHTML = month + '月 ' + year;// 设置今天日期document.getElementById('today_day').innerHTML =year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ('(今天)');
}window.onload = () => {// 给按钮添加事件
addListen2Element();// 显示本月日历
setThisMonthCalendar();
};转载于:https://www.cnblogs.com/l48x4264l46/p/11038865.html
使用纯原生JS实现日历相关推荐
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- 扫雷html5简单初级,纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- 纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- html手机页面选项卡,移动端网页纯原生js选项卡tab切换
适合移动网页纯原生js选项卡tab切换 *{ margin: 0; padding: 0} ul,li{ list-style: none} .tabClick{ background: #f3f3f ...
- 纯原生JS实现导出Excel文件
前言: 各种js库用起来冗余,并且只想简单的导出excel文件 选择table标签是为了后期能定制化内容 0.效果预览 excel文件: 浏览器控制台 触发下载: 1.定义工具函数: // xlsxE ...
- 你需要了解的纯原生JS实现带有功能的前端购物车
先来介绍一下都有哪些功能叭 添加购物车,清单库存数量会对应减少,库存不足会警告 从购物车删除,库存将返回清单,总价相应变化 点击"-",数量会返回到清单库存 点击"+&q ...
- 【javascript】纯原生js的轻便组织结构图，树状图，支持自定义样式
前言 写这个插件呢,只是一时兴起,公司的项目中使用到了组织结构图,然后本着面向百度.谷歌编程的思想,我去摸索了半天. 结果一无所获,可能这个词用的有点重了,但是就是没有符合我公司项目要求的,然后我又去 ...
- 聚划算导航栏的反弹效果代码 纯原生js实现
一.首先是HTML代码: 记得在头部加一个移动端的视口 <header><div class="logo">聚划算</div><div ...
最新文章
- python快乐编程—基础入门-Python零基础快乐学习之旅(K12实战训练)
- 计算机组成原理—— 指令系统
- 详解在 Linux 启动时，如何自动执行命令或脚本
- linux切换图片的代码,cacaview – Linux终端下将图片转换ASCII Art代码图案
- 在Excel中实现下拉列表选择录入
- java heroku_Heroku和Java –从新手到初学者，第2部分
- 浅谈ASP.NET 4中构造“.NET研究”HTML5视频控件
- 用Python手写五大经典排序算法，看完这篇终于懂了！
- 在C 编程语言中 静态数组的替代模板,以编译方式在C ++中编译时创建静态数组...
- UART协议概述与实现
- Java web 第一天
- 出现java.sql.SQLException: No suitable driver的几种解决办法
- LeetCode之搜索旋转排序数组
- 190401每日一句
- 中文计算机语言编程优势,十种编程语言特点比较
- 波斯顿动力机器人为啥那么牛逼？
- C语言实验报告（通用）
- Ubuntu下安装SQLite、与简单介绍
- codeforces：E. MEX and Increments【贪心 + 略加优化】
- 简智音科技：抖音短视频时长几何为好呢？