新修改
！多渲染下一年的日期
！在查找日期時 兩種查找方案 第二種還需優化
<!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>
