JavaScript自定义日历效果
作者:雪旭 时间:2024-04-28 09:33:55
本文实例为大家分享了JavaScript自定义日历效果的具体代码,供大家参考,具体内容如下
实现思路:获取每个月的第一天是星期几,然后把前面的天数填充为空,在获取每个月有多少天,循环填充,判断并给给当前时间添加单独样式,点击上一月,和下一月时改变月份。
获取当前月第一天:返回值是 0(周日) 到 6(周六) 之间的一个整数
var date = new Date();
var y=date.getFullYear();
var m=date.getMonth();
new Date(y,m,1).getDay();
获取当前月有多少天
var date = new Date();
var y=date.getFullYear();
var m=date.getMonth();
new Date(y,m+1,-1).getDate()+1;
最后点击上一月,下一月月份加一或减一,在执行封装的日历函数。
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #2c3e50;
}
.calendar {
width: 400px;
margin: 50px auto;
}
.calendar-tip {
font-size: 16px;
text-align: center;
color: #fff;
}
.prev {
float: left;
cursor: pointer;
}
.next {
float: right;
cursor: pointer;
}
.calendar-month {
text-align: center;
margin: 10px 0;
color: #fff;
}
ul {
list-style: none;
display: flex;
}
li {
width: 57px;
text-align: center;
height: 55px;
line-height: 55px;
font-size: 16px;
color: #fff;
}
.calendar-day {
display: flex;
}
.calendar-day span {
flex: 1;
color: #fff;
text-align: center;
height: 40px;
line-height: 40px;
}
.calendar-data {
display: flex;
flex-wrap: wrap;
}
li {
width: 57px;
cursor: pointer;
}
li:hover {
background: #2d3436;
}
.calendar-data .on {
color: #d63031;
}
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-tip">
<span class="prev">上一月</span>
<em id="year">2022年</em>
<span class="next">下一月</span>
</div>
<div class="calendar-month">五月</div>
<div class="calendar-day">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<ul class="calendar-data">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script>
var date = new Date();
var year = document.querySelector("#year");
var month = document.querySelector(".calendar-month");
var calendarData = document.querySelector(".calendar-data");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var monthArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
var y,m,day,d,html,today;
calendar();
function calendar() {
y = date.getFullYear();
year.innerHTML = y + "年";
m = date.getMonth();
month.innerHTML = monthArr[m];
day = new Date(y, m, 1).getDay(); //获取每个月第一天是周几
d = new Date(y, m + 1, -1).getDate() + 1; //获取多少天
html = "";
//把每个月第一天之前的时间填充为空
for (var i = 0; i < day; i++) {
html += "<li> </li>";
}
for (var j = 1; j <= d; j++) {
if (y==new Date().getFullYear() && m==new Date().getMonth() && j== date.getDate()) {
html += "<li class='on'>" + j + "</li>";
} else {
html += "<li>" + j + "</li>";
}
}
calendarData.innerHTML = html;
}
prev.onclick = function () {
date.setMonth(date.getMonth() - 1);
calendar();
}
next.onclick = function () {
date.setMonth(date.getMonth() + 1);
calendar();
}
</script>
</body>
</html>
效果:
来源:https://www.cnblogs.com/zimengxiyu/p/12568477.html
标签:js,日历
0
投稿
猜你喜欢
Python "手绘风格"数据可视化方法实例汇总
2023-01-30 03:12:23
10分钟学会Google Map API (二)
2009-06-07 18:14:00
详解如何使用Python隐藏图像中的数据
2022-01-31 21:32:38
pandas中df.groupby()方法深入讲解
2024-01-01 15:30:24
Pytorch中expand()的使用(扩展某个维度)
2023-11-05 19:54:47
Pygame框架实现飞机大战
2023-09-15 02:14:24
python实现dnspod自动更新dns解析的方法
2021-10-24 14:19:47
基于python爬虫数据处理(详解)
2023-06-07 11:38:39
PHP5在Apache下的两种模式的安装
2023-11-24 05:18:08
Javascript获取background属性中url的值
2024-04-10 13:59:10
浅谈javascript 函数表达式和函数声明的区别
2024-04-27 15:19:39
MySQL Left JOIN时指定NULL列返回特定值详解
2024-01-16 09:55:32
Go语言通过Luhn算法验证信用卡卡号是否有效的方法
2023-07-23 17:28:07
Django框架中render_to_response()函数的使用方法
2023-09-03 13:58:49
使用python求解迷宫问题的三种实现方法
2022-10-25 01:16:35
解决pandas read_csv 读取中文列标题文件报错的问题
2023-04-16 06:54:37
微信小程序-滚动消息通知的实例代码
2024-04-16 10:41:16
Django视图层与模板层实例详解
2022-01-24 10:20:09
python中sub-pub机制实现Redis的订阅与发布
2023-08-22 09:34:41
HTML5实现留言和回复页面样式
2024-04-18 10:32:20