新修改
！多渲染下一年的日期
！在查找日期时 两种查找方案 第二种还需优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.input {
border: 1px solid #eee;
margin: 10px;
}
.search {
border: 1px solid #eee;
width: 80px;
height: 25px;
text-align: center;
line-height: 25px;
border-radius: 10px;
cursor: pointer;
margin: 10px;
}
.select {
font-weight: bold;
zoom: 1.5;
color: bisque;
}
.mainList {
width: 90%;
margin: 0 auto;
font-size: 24px;
overflow: hidden;
}
.mainList .list li {
display: inline-block;
width: 150px;
}
</style>
</head>
<body>
<input type="text" class="input">
<div class="search">查询</div>
<div>时间列表</div>
<div class="mainList">
<ul class="list"></ul>
</div>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
// 获取一个月天数
function getDay(time) {
// 获取一个月天数
function getCountDays(time) {
var curDate = time ? new Date(time) : new Date()
/* 获取当前月份 */
var curMonth = curDate.getMonth();
/* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
curDate.setMonth(curMonth + 1);
/* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
curDate.setDate(0);
/* 返回当月的天数 */
return curDate.getDate();
}
// 具体天
function getEvryDay(day) {
var dayArry = [];
for (var k = 1; k <= day; k++) {
dayArry.push(k);
}
return dayArry;
};
var day = getCountDays(time);
var val = getEvryDay(day)
return val
}
// 获取一年的日期
function getYearDay(year) {
var arr = []
for (let i = 1; i <= 12; i++) {
arr.push(getDay(year + "-" + i + "-01"))
}
return arr
}
// 渲染今年的日期
function renderStr(year, YearDay , YearDayNex ) {
let str = ``
let len = 0
for (let i = 0; i < YearDay.length; i++) {
for (k = 0; k < YearDay[i].length; k++) {
str += `<li>${year}.${i + 1}.${k + 1}</li>`
// str += `<li>${i + 1}.${k + 1}</li>`
len++
}
}
if(YearDayNex){
for (let i = 0; i < YearDayNex.length; i++) {
for (k = 0; k < YearDayNex[i].length; k++) {
str += `<li>${year+1}.${i + 1}.${k + 1}</li>`
// str += `<li>${i + 1}.${k + 1}</li>`
len++
}
}
}
$(".list").html(str)
$(".list").css("width", len * 150 + "px")
}
// 查询今天是哪一天
function dateIndexInYear(ntime, ytime) {
var nowDate = ntime ? new Date(ntime) : new Date()
var initTime = ytime ? new Date(ytime) : new Date()
console.log(nowDate, initTime)
initTime.setMonth(0); // 本年初始月份
initTime.setDate(1); // 本年初始时间
var differenceVal = nowDate - initTime; // 今天的时间减去本年开始时间，获得相差的时间
return Math.ceil(differenceVal / (24 * 60 * 60 * 1000));
};
// 最终的执行
function render(time) {
var times;
var year;
if (time) {
times = time
// 兼容 2019-01-01 2019/01/01
year = times.split("-")[0].split("/")[0]
} else {
times = new Date().getFullYear() + "/" + (new Date().getMonth() * 1 + 1) + "/" + new Date().getDate();
year = new Date().getFullYear()
}
// 某一年所有天数
var YearDay = getYearDay(year)
// 新加 获取下一年的日期
var YearDayNex=getYearDay(year*1+1*1)
// 页面渲染
renderStr(year, YearDay , YearDayNex)
// // 页面渲染
// renderStr(year, YearDay)
// 查找加动画
selectDom(times, year)
}
// 查找当前的元素
function selectDom(times, year) {
if(!year){
// 兼容 2019-01-01 2019/01/01
var year = times.split("-")[0].split("/")[0]
}
// 页面当前选择的下标
var index = dateIndexInYear(times, year + "-01-01")
// 当前时间的下标
var nowIndex=dateIndexInYear()
// *******
// 获取下标 需做些判断 是否是本年 下标需要进行相加
// ********
// 设置样式
$(".list li").eq(index).addClass("select").siblings().removeClass("select")
// 页面可视的宽
var Awidth=$(".mainList").width()
var Lwidth=$(".list li").eq(0).outerWidth(true)
// 可视几个元素
var num=Math.floor((Awidth/Lwidth)/2)
// 位移 可加动画
if(index<=num){
$(".list").css("marginLeft","0px")
}else{
$(".list").css("marginLeft","-"+(Lwidth*(index-num))+"px")
}
}
// 执行
render()
$(".search").on("click", function () {
console.log($(".input").val())
var value=$(".input").val().trim()
// 可以对入参加校验
// 两个方案
// 重新渲染要查询的日期及下一年的日期 存在回到今天不方便的情况 （超出设定的年月）
render(value)
// 在渲染出来的日历里进行查找 存在查找不到的情况 （超出设定的年月） （还需做调整才能使用）
// selectDom(value)
})
</script>
</body>
</html>
