### ## 页面  ## 代码 ## 前端 ``` ~~~ <div class="sy_jybanner"> <ul class="layui-row"> <li class="layui-col-sm1 sy_pre "> <svg t="1595297325418" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2090" width="80" height="80"> <path d="M1202.441481 75.093333c-3.887407-1.991111-8.154074-2.939259-12.325925-2.939259-5.688889 0-11.377778 1.801481-16.213334 5.30963L612.977778 490.002963c-7.016296 5.12-11.188148 13.368889-11.093334 22.091852 0 8.722963 4.266667 16.877037 11.282963 21.997037l560.924445 405.807407c4.740741 3.413333 10.334815 5.214815 16.023704 5.214815 4.266667 0 8.533333-0.948148 12.42074-3.034074 9.102222-4.645926 14.885926-14.032593 14.885926-24.272593V99.365926c0-10.24-5.783704-19.626667-14.980741-24.272593z" p-id="2091" fill="#8a8a8a"></path> </svg> </li> <li class=" sy_jymid01 layui-col-sm3 "><p class="sy_datepre">2020-05-10</p> <p class="sy_weekpre">星期日</p></li> <li class="sy_jymid layui-col-sm4"> <p class="sy_date">2020-05-10</p> <p class="sy_week">星期日</p> </li> <li class=" sy_jymid01 layui-col-sm3"><p class="sy_datenext">2020-05-10</p> <p class="sy_weeknext">星期日</p></li> <li class="layui-col-sm1 sy_cgadd"> <svg t="1595297363273" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2847" width="80" height="80"> <path d="M1206.423704 493.416296L646.447407 80.497778c-4.835556-3.508148-10.524444-5.30963-16.213333-5.30963-4.171852 0-8.438519 0.948148-12.325926 2.939259-9.197037 4.645926-14.980741 14.032593-14.980741 24.367408V921.6c0 10.24 5.783704 19.626667 14.885926 24.367407 3.887407 1.991111 8.154074 2.939259 12.420741 2.93926 5.688889 0 11.282963-1.801481 16.023704-5.214815l559.976296-406.186667c7.016296-5.12 11.282963-13.274074 11.282963-21.997037 0.094815-8.722963-4.077037-16.877037-11.093333-22.091852z" p-id="2848" fill="#8a8a8a"></path> </svg> </li> </ul> </div> ~~~ ``` ## JS部分 ``` ~~~ $(function () { /*日期点击事件 , 前一天和后一天*/ // * 日期 转换为 Unix时间戳 // * @param <string> 2014-01-01 20:20:20 日期格式 // * @return <int> unix时间戳(秒) function DateToUnix(string) { var f = string.split(' ', 2); var d = (f[0] ? f[0] : '').split('-', 3); return (new Date( parseInt(d[0], 10) || null, (parseInt(d[1], 10) || 1) - 1, parseInt(d[2], 10) || null, )).getTime() / 1000; }; // * 时间戳转换日期 // * @param <int> unixTime 待时间戳(毫秒) // * @param <bool> isFull 返回完整时间(Y-m-d 或者 Y-m-d H:i:s) // * @param <int> timeZone 时区 function UnixToDate(unixTime, isFull, timeZone) { if (typeof (timeZone) == 'number') { unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60; } var time = new Date(unixTime); var ymdhis = ""; ymdhis += time.getUTCFullYear() + "-"; ymdhis += (time.getUTCMonth() + 1) + "-"; ymdhis += time.getUTCDate(); return ymdhis; } function week(num) { switch (num) { case 1:return "星期一";break; case 2:return "星期二";break; case 3:return "星期三";break; case 4:return "星期四";break; case 5:return "星期五";break; case 6:return "星期六";break; case 0:return "星期日";break; case "星期一":return '1';break; case "星期二":return '2';break; case "星期三":return '3';break; case "星期四":return '4';break; case "星期五":return '5';break; case "星期六":return '6';break; case "星期日":return '0';break; } } var dd = new Date(); $('.sy_weekpre').text(week(dd.getDay() - 1)); $('.sy_week').text(week(dd.getDay())); $('.sy_weeknext').text(week(dd.getDay() + 1)); var curDate = UnixToDate(dd.getTime(), 'Y-m-d', '8'); var preDate = UnixToDate(dd.getTime() - 24 * 60 * 60 * 1000, 'Y-m-d', '8'); //前一天 var nextDate = UnixToDate(dd.getTime() + 24 * 60 * 60 * 1000, 'Y-m-d', '8'); //后一天 $(".sy_datepre").text(preDate); $(".sy_date").text(curDate); $(".sy_datenext").text(nextDate); /*后一天*/ $(".sy_cgadd").click(function () { $(".sy_weekpre").text($('.sy_week').text()); $(".sy_week").text($('.sy_weeknext').text()); var nn = week($('.sy_weeknext').text()); nn = parseInt(nn); if (nn == 6) { nn = 0; } else { nn = nn + 1; } $(".sy_weeknext").text(week(nn)); var strnext = DateToUnix($('.sy_datenext').text()) + 24 * 60 * 60; var nextDate = UnixToDate(strnext * 1000 + 24 * 60 * 60 * 1000, 'Y-m-d', '8'); //后一天 $(".sy_datepre").text($('.sy_date').text()); $(".sy_date").text($('.sy_datenext').text()); $(".sy_datenext").text(nextDate); }); //前一天 $(".sy_pre").click(function () { $(".sy_weeknext").text($('.sy_week').text()); $(".sy_week").text($('.sy_weekpre').text()); var nn = week($('.sy_weekpre').text()); nn = parseInt(nn); if (nn == 0) { nn = 6; } else { nn = nn - 1; } $(".sy_weekpre").text(week(nn)); var strnext = DateToUnix($('.sy_datenext').text()) - 24 * 60 * 60; var nextDate = UnixToDate(strnext * 1000 - 24 * 60 * 60 * 1000, 'Y-m-d', '8'); //后一天 $(".sy_datenext").text($('.sy_date').text()); $(".sy_date").text($('.sy_datepre').text()); $(".sy_datepre").text(nextDate); }); }); ~~~ ```