【html css js】实现一个简易日历
——【效果预览】
实现了日历最基础的功能，当前日期红色显示，可通过上方的左右按钮查看上一月或下一月的日期。
——【代码部分】
1. HTML
<body>
<div class="cldBody">
<table>
<thead>
<tr>
<td colspan="7">
<div class="top">
<span id="left"><</span>
<span id="topDate"></span>
<span id="right">></span>
</div>
</td>
</tr>
<tr id="week" >
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="tbody" ></tbody>
</table>
</div>
</body>
2. CSS
<style type="text/css">
.cldBody{background:#f7f7f7;width: 420px;margin: 10px auto;}
.cldBody .top{height: 60px;line-height: 60px;text-align: center;position: relative;}
#topDate{font-size: 24px;}
#week td{font-size: 15px;}
td{width: 60px; height: 60px;line-height: 60px;text-align: center;font-size: 20px;}
#tbody td:hover{background: #ededed;cursor: pointer;}
.curDate{color: red;font-weight: bold;}
#left,#right{width: 60px;height: 60px;position: absolute;cursor: pointer;}
#left{left: 0;}
#right{right: 0;}
#left:hover, #right:hover{background-color: rgba(30, 30, 30, 0.2);}
</style>
【效果图】：
3.JS部分【博主引用了jq框架】
——1. 引入jq
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
——2. 添加月份到顶部
var date = new Date();
var year = date.getFullYear();
var nowyear = date.getFullYear();
var month = date.getMonth()+1;
var nowmonth = date.getMonth()+1;
var dateday = date.getDate();
var todateHtml = year + '年'+ month + '月';
$('#topDate').text(todateHtml)
——3. 添加日历函数
function showcld(){
var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31]; // 创建数组存放每个月有多少天 ,默认2月为28天
// 判断闰年
if(year % 4 == 0 && year %100 != 0 || year % 400 == 0){
monthDay[1] = 29;
}
// 计算每个月的天数
var days = monthDay[month-1];
// 判断每月第一天为周几
date.setYear(year); //某年
date.setMonth(month-1); //某年的某月
date.setDate(1); // 某月的某天
var weekday = date.getDay(); // 判断某天是周几
// 补齐一号前的空格
var tbodyHtml = '<tr>';
for(var i = 0; i<weekday; i++){
tbodyHtml += "<td></td>";
}
// 补齐每月的日期
var changLine = weekday;
var tagClass = '';
for(i=1; i<=days; i++){//每一个日期的填充
if(year == nowyear && month == nowmonth && i == dateday) {
tagClass = "curDate";//当前日期对应格子
}else{
tagClass = "isDate";
}
tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";
changLine = (changLine+1)%7;
if(changLine == 0 && i != days){//是否换行填充的判断
tbodyHtml += "</tr><tr>";
}
}
$('#tbody').empty(); // 清空原有的内容
$('#tbody').append(tbodyHtml); //添加当前月份的日期内容
}
——4.添加点击按钮事件
// 设置按钮点击事件
$('#left').click(function(){
month = month-1;
if(month < 1){
month = 12;
year--;
}
var todateHtml = year + '年'+ month + '月';
$('#topDate').text(todateHtml);
showcld();
}); $('#right').click(function(){
month = month+1;
if(month > 12){
month = 1;
year++;
}
var todateHtml = year + '年'+ month + '月';
$('#topDate').text(todateHtml);
showcld();
})
showcld(); //页面加载后执行函数
【html css js】实现一个简易日历的更多相关文章
- avalon.js实现一个简易日历
使用MVVM框架avalon.js实现一个简易日历 最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...
- 使用MVVM框架avalon.js实现一个简易日历
最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...
- 使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
- 使用 js 实现一个简易版的模版引擎
使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...
- 使用 js 实现一个简易版的 async 库
使用 js 实现一个简易版的 async 库 具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NU ...
- 使用 js 实现一个简易版的 vue 框架
使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
随机推荐
- 全球首个开放应用模型 OAM 开源 | 云原生生态周报 Vol. 23
作者 | 临石.元毅.冬岛.衷源.天元 业界要闻 全球首个开放应用模型 OAM 开源 2019 年 10 月 17 日,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon ...
- 如何使用Externalizable接口自定义Java中的序列化
Java序列化过程的缺点 我们都知道如何使用Serializable接口序列化/反序列化一个对象,并且如何使用writeObject 和readObject方法自定义序列化过程. 但是这些自定义还不够 ...
- AWD攻防工具脚本汇总(一)
最近工作很忙 今天抽空准备下AWD比赛得攻防工具和脚本 以下只是常用 希望下周不被吊锤~~ 后续整理后想抽空写成一个攻击框架汇总放github~~ 这里从各种情景和需求中去总结工具和脚本的使用 情 ...
- 实验吧之【Forms、天网管理系统】
Forms 原题链接 http://ctf5.shiyanbar.com/10/main.php Form 其实是个提示,代表html表单 F12 查看源码,发现 <input name=&qu ...
- [Luogu2737] [USACO4.1]麦香牛块Beef McNuggets
题目描述 农夫布朗的奶牛们正在进行斗争,因为它们听说麦当劳正在考虑引进一种新产品:麦香牛块.奶牛们正在想尽一切办法让这种可怕的设想泡汤.奶牛们进行斗争的策略之一是“劣质的包装”.“看,”奶牛们说,“如 ...
- libevent::事件
/***************************************************************** 函数功能: 创建事件集 ********************* ...
- 百万年薪python之路 -- 生成器
1.生成器 #本质就是迭代器 1.1 生成器的构建方式 在python中有三种方式来创建生成器: 1.通过生成器函数 2.通过生成器推导式 3.python内置函数或者模块提供 1.2 生 ...
- java面试官：兄弟简单谈谈Static、final、Static final各种用法吧
前言 对Static.final.Static final这几个关键词熟悉又陌生?想说却又不知怎么准确说出口?好的,本篇博客文章将简短概要出他们之间的各自的使用,希望各位要是被你的面试官问到了,也能从 ...
- OptimalSolution(5)--数组和矩阵问题（2）2
一.找到无序数组中最小的k个数 二.在数组中找到出现次数大于N/K的数 三.最长的可整合子数组的长度 四.不重复打印排序数组中相加和为给定值的所有二元组和三元组 五.未排序正数数组中累加和为给定值的最 ...
- Java8系列 (四) 静态方法和默认方法
静态方法和默认方法 我们可以在 Comparator 接口的源码中, 看到大量类似下面这样的方法声明 //default关键字修饰的默认方法 default Comparator<T> t ...