<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日历</title>
<style>
span {
display: inline-block;
width: 41px;
height: 28px;
line-height: 28px;
text-align: center;
}
h3{
margin-top: 50px;
}
</style>
</head>
<body>
<h2>请输入你要查看的年月</h2>
<input type="text" name="" id="">年
<input type="text" name="" id="">月
<button>显示日历</button>
<br>
<h3>日历表</h3>
<div class="box"></div>
<script>
var btn = document.getElementsByTagName("button")[0]
var div1 = document.getElementsByTagName("div")[0]
// 定义内部元素
var sp
var div
// 点击函数
btn.onclick = function () {
// 当父元素的子节点值大于0 的时候 清除所有子节点
// 防止div中元素一直叠加
if(div1.childNodes.length>0){
div1.removeChild(sp)
div1.removeChild(div)
}
var inp1 = Number(document.getElementsByTagName("input")[0].value)
var inp2 = Number(document.getElementsByTagName("input")[1].value)
// 判断月份
if (inp2 == 1 | inp2 == 3 | inp2 == 5 | inp2 == 7 | inp2 == 8 | inp2 == 10 | inp2 == 12) {
// 获取第一天是周几
var d = new Date(inp1, inp2 - 1, 1).getDay()
// 用来存储插入的span
var arr = []
sp = document.createElement("div")
// 插入日期头
sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"
div1.appendChild(sp)
div = document.createElement("div")
div1.appendChild(div)
// 判断1号是周几
for (var i = 0; i < d ; i++) {
var span = document.createElement("span")
span.innerHTML = "**"
div.appendChild(span)
arr.push(span)
}
// 天数循环
for (var i = 1; i < 32; i++) {
var span = document.createElement("span")
span.innerHTML = i
div.appendChild(span)
arr.push(span)
if (arr.length % 7 == 0) {
// 每次arr长度是7的倍数 换行
var br = document.createElement("br")
div.appendChild(br)
}
}
} else if (inp2 == 2) {
// 闰年 有29天 判断闰年
if (inp1 % 4 == 0 && inp1 % 100 != 0 || inp1 % 400 == 0) {
var d = new Date(inp1, inp2 - 1, 1).getDay()
var arr = []
sp = document.createElement("div")
sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"
div1.appendChild(sp)
div = document.createElement("div")
div1.appendChild(div)
for (var i = 0; i < d ; i++) {
var span = document.createElement("span")
span.innerHTML = "**"
div.appendChild(span)
arr.push(span)
}
for (var i = 1; i < 30; i++) {
var span = document.createElement("span")
span.innerHTML = i
div.appendChild(span)
arr.push(span)
if (arr.length % 7 == 0) {
var br = document.createElement("br")
div.appendChild(br)
}
}
} else {
var arr = []
var d = new Date(inp1, inp2 - 1, 1).getDay()
sp = document.createElement("div")
sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"
div1.appendChild(sp)
div = document.createElement("div")
div1.appendChild(div)
for (var i = 0; i < d ; i++) {
var span = document.createElement("span")
span.innerHTML = "**"
div.appendChild(span)
arr.push(span)
}
for (var i = 1; i < 29; i++) {
var span = document.createElement("span")
span.innerHTML = i
div.appendChild(span)
arr.push(span)
if (arr.length % 7 == 0) {
var br = document.createElement("br")
div.appendChild(br)
}
}
}
} else {
var arr = []
var d = new Date(inp1, inp2 - 1, 1).getDay()
sp = document.createElement("div")
sp.innerHTML = "<div> <span>日</span> <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>"
div1.appendChild(sp)
div = document.createElement("div")
div1.appendChild(div)
for (var i = 0; i < d ; i++) {
var span = document.createElement("span")
span.innerHTML = "**"
div.appendChild(span)
arr.push(span)
}
for (var i = 1; i < 31; i++) {
var span = document.createElement("span")
span.innerHTML = i
div.appendChild(span)
arr.push(span)
if (arr.length % 7 == 0) {
var br = document.createElement("br")
div.appendChild(br)
}
}
}
}
</script>
</body>
</html>
以上就是通过js实现一个日历
扫一扫
1847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
