JS自制极简日历Demo
这个日历界面不属于任何插件，纯粹用最基本的JS函数获取到每个位置对应的日期，然后再通过遍历拼接table表单的方式赋值到HTML里面进行展示，日历效果的显示，其中使用到的文件只需要一个Jquery的JS文件即可实现如下效果：
Demo只是一个简单的日历模板，没有太多函数和限制，开发人员可以基于自己的想法在里面任意更改
下列是JS代码：
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function () {
//获取当前日期及其年月
var todate=new Date();
var year=todate.getFullYear();//当前年份
var month=todate.getMonth()+1;//当前月份
$("#tdtitle").html(year+"年"+month+"月");
//传入ID定义初始化方法
InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');
});
//初始化方法
function InitialMethod(tabID, year, month, style, tdclass)
{
//获取月份的第一天
var MonthOne = new Date(year + '/' + month + '/01');
//获取第一天是星期几
var weekOne = MonthOne.getDay();
//几天前
var AgoDay = (weekOne) * (-1);
//当月最大日期的索引
var MaxDay = getCountDays(MonthOne)-1;
//当前日期
var today = getToday();
var strhtml;
var countNum = 0;
//6行 7列
for (var i = 0; i < 6; i++)
{
strhtml += "<tr class='" + style + "'>";
for (var j = 0; j < 7; j++)
{
var sum = AgoDay + countNum;
if (sum < 0 || sum > MaxDay)
{
strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else if (ReturnDay(sum,MonthOne) == today) {
strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else {
strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";
}
countNum++;
}
strhtml+="</tr>";
}
tabID.html(strhtml);
} //几天前/后的日期
function ReturnDay(day,OneDate) {
var time = new Date(OneDate);
time.setDate(time.getDate() + day);//获取Day天后的日期
var y = time.getFullYear();
var m = time.getMonth() + 1;//获取当前月份的日期
var d = time.getDate();
return d;
} //当月有多少天
function getCountDays(time) {
var curDate = new Date(time);
/* 获取当前月份 */
var curMonth = curDate.getMonth();
/* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
curDate.setMonth(curMonth + 1);
/* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
curDate.setDate(0);
/* 返回当月的天数 */
return curDate.getDate();
}
//当前日期
function getToday()
{
var time = new Date();
var today = time.getDate();
return today;
}
</script>
HTML代码：
<body>
<div id="SlopeCheckContainer" style="text-align:center; margin:auto;">
<table id="concent" class="tableclass">
<tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>
<tr style="height:5%">
<td class="tdclass">星期天</td>
<td class="tdclass">星期一</td>
<td class="tdclass">星期二</td>
<td class="tdclass">星期三</td>
<td class="tdclass">星期四</td>
<td class="tdclass">星期五</td>
<td class="tdclass">星期六</td>
</tr>
<tbody id="tbTypesetting"></tbody>
</table>
</div>
</body>
Demo的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.tableclass
{
width:100%;
clear:both;
font-size: 12px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-collapse: collapse;
} .trclass
{
height:50px;
} .tdclass
{
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background-color:#ffffff;
}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function () {
//获取当前日期及其年月
var todate=new Date();
var year=todate.getFullYear();//当前年份
var month=todate.getMonth()+1;//当前月份
$("#tdtitle").html(year+"年"+month+"月");
//传入ID定义初始化方法
InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');
});
//初始化方法
function InitialMethod(tabID, year, month, style, tdclass)
{
//获取月份的第一天
var MonthOne = new Date(year + '/' + month + '/01');
//获取第一天是星期几
var weekOne = MonthOne.getDay();
//几天前
var AgoDay = (weekOne) * (-1);
//当月最大日期的索引
var MaxDay = getCountDays(MonthOne)-1;
//当前日期
var today = getToday();
var strhtml;
var countNum = 0;
//6行 7列
for (var i = 0; i < 6; i++)
{
strhtml += "<tr class='" + style + "'>";
for (var j = 0; j < 7; j++)
{
var sum = AgoDay + countNum;
if (sum < 0 || sum > MaxDay)
{
strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else if (ReturnDay(sum,MonthOne) == today) {
strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";
}
else {
strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";
}
countNum++;
}
strhtml+="</tr>";
}
tabID.html(strhtml);
} //几天前/后的日期
function ReturnDay(day,OneDate) {
var time = new Date(OneDate);
time.setDate(time.getDate() + day);//获取Day天后的日期
var y = time.getFullYear();
var m = time.getMonth() + 1;//获取当前月份的日期
var d = time.getDate();
return d;
} //当月有多少天
function getCountDays(time) {
var curDate = new Date(time);
/* 获取当前月份 */
var curMonth = curDate.getMonth();
/* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
curDate.setMonth(curMonth + 1);
/* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
curDate.setDate(0);
/* 返回当月的天数 */
return curDate.getDate();
}
//当前日期
function getToday()
{
var time = new Date();
var today = time.getDate();
return today;
}
</script>
</head>
<body>
<div id="SlopeCheckContainer" style="text-align:center; margin:auto;">
<table id="concent" class="tableclass">
<tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>
<tr style="height:5%">
<td class="tdclass">星期天</td>
<td class="tdclass">星期一</td>
<td class="tdclass">星期二</td>
<td class="tdclass">星期三</td>
<td class="tdclass">星期四</td>
<td class="tdclass">星期五</td>
<td class="tdclass">星期六</td>
</tr>
<tbody id="tbTypesetting"></tbody>
</table>
</div>
</body>
</html>
JS自制极简日历Demo的更多相关文章
- 极简 Node.js 入门 - 3.2 文件读取
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 5.1 创建 HTTP 服务器
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 5.3 静态资源服务器
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 自制 os 极简教程1：写一个操作系统有多难
为什么叫极简教程呢?听我慢慢说 不知道正在阅读本文的你,是否是因为想自己动手写一个操作系统.我觉得可能每个程序员都有个操作系统梦,或许是想亲自动手写出来一个,或许是想彻底吃透操作系统的知识.不论是为了 ...
- Snabbt.js – 极简的 JavaScript 动画库
Snabbt.js 是一个简约的 JavaScript 动画库.它会平移,旋转,缩放,倾斜和调整你的元素.通过矩阵乘法运算,变换等可以任何你想要的方式进行组合.最终的结果通过 CSS3 变换矩阵设置. ...
- 基于 Node.js 平台，快速、开放、极简的 web 开发框架。
资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...
- weixinShare.js / 极简微信分享插件
weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...
- 原生JS轮播-各种效果的极简实现
寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...
- js消除小游戏(极简版)
js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...
- HTML5 极简的JS函数
页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...
随机推荐
- 音视频八股文（3）--ffmpeg常见命令（2）
07-ffplay命令播放媒体 播放本地文件 播放本地 MP4 视频文件 test.mp4 的命令,从第 2 秒位置开始播放,播放时长为 10 秒,并且在窗口标题中显示 "test time ...
- ModuleNotFoundError: No module named 'flask_mail'
ModuleNotFoundError: No module named 'flask_mail' 解决: pip install flask_mail
- ESLint: Expected a space before ‘/>；‘, but not found. (vue/html-closing-bracket-spacing)
文件->设置->编辑器->代码样式->HTML->其他-->在空的标签(打钩)
- Row size too large. The maximum row size for the used table type, not counting BLOBs, is 65535.
问题描述 新建表或者修改表varchar字段长度的时候,出现这个错误 Row size too large. The maximum row size for the used table type, ...
- Redis数据结构三之压缩列表
本文首发于公众号:Hunter后端 原文链接:Redis数据结构三之压缩列表 本篇笔记介绍压缩列表. 在 Redis 3.2 版本之前,压缩列表是列表对象.哈希对象.有序集合对象的的底层实现之一. 因 ...
- 【GPT-4理论篇-1】GPT-4核心技术探秘
前言 GPT-4已经发布有一段时间了,但是出于安全性等各种原因,OpenAI并没有公布GPT-4的技术细节和代码,而是仅仅给出了一个长达100页的技术报告[1]. 这个技术报告着重介绍了GPT-4的强 ...
- 2019年蓝桥杯C／C++大学B组省赛真题(数的分解)
题目描述: 把2019分解成3个各不相同的正整数之和,并且要求每个正整数都不包含数字2和4,一共有多少种不同的分解方法? 注意交换3个整数的顺序被视为同一种方法,例如1000+1001+18 和100 ...
- .net 温故知新【11】：Asp.Net Core WebAPI 入门使用及介绍
在Asp.Net Core 上面由于现在前后端分离已经是趋势,所以asp.net core MVC用的没有那么多,主要以WebApi作为学习目标. 一.创建一个WebApi项目 我使用的是VS2022 ...
- 【电脑Tips】Win11自动更新之后开机黑屏
目录 0.问题描述 1. 释放静电 具体操作 效果 参考博客 2. 运行explorer.exe 具体操作: [问题]:如何打开任务管理器? 效果 参考博客 另外的运行方法 3. 禁用APP Read ...
- 一站式数据可观测性平台 Datavines 正式开源啦
Datavines是一站式开源数据可观测性平台,提供元数据管理.数据概览报告.数据质量管理,数据分布查询.数据趋势洞察等核心能力,致力于帮助用户全面地了解和掌管数据,让您做到心中有数,目前作为 Dat ...