JS 日期轴
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/common.css" /> <script type="text/javascript" src="js/jq.js"></script> <script type="text/javascript" src="js/mrt.js"></script> </head> <style> * { padding: 0; margin: 0 } a, dd { display: inline-block; height: 40px; line-height: 40px; text-align: center; cursor: pointer; } a { width: 20px; background-color: blue; float: left; position: absolute; z-index: 2 } a:hover, dd:hover { background-color: #f00 } dd { background-color: #ccc; margin: 0 1px; line-height: 20px; } dd.selected { background-color: #f00 } dl { width: 100%; overflow: hidden; height: 40px; display: inline-block; float: left; white-space: nowrap; position: relative; } dl div { position: absolute; transition: .2s; } .move-date { position: relative; } a.disabled{background: #ccc;} a.scroll-left { left: 0; } a.scroll-right { right: 0; } </style>
<body> <div class="move-date"> <a class="scroll scroll-left" onclick="leftMove()"><</a> <dl> <div></div> </dl> <a class="scroll scroll-right" onclick="rightMove()">></a> </div> </body> <script> var setDate = "2016-11-18"; var w, w1, w2, setGo = 0, left = 0; var a = new Date(); var b = a.getFullYear(); var c = a.getDate(); var d = a.getMonth()+1; var e = b+"-"+d+"-"+c; function DateDiff(sDate1, sDate2) { var aDate, oDate1, oDate2, iDays aDate = sDate1.split("-") oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) aDate = sDate2.split("-") oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) return iDays } function reset() { var myDate = new Date(), today = myDate.getDate(), setDay = today + 60, html = ""; g = today + DateDiff(e,setDate); for(var i = today; i < setDay; i++) { myDate.setDate(i); if(i == g) html += "<dd class='selected'>" + (myDate.getMonth() + 1) + "-" + myDate.getDate() + "<br />" + weekday(myDate.getDay()) + "</dd>"; else html += "<dd class=''>" + (myDate.getMonth() + 1) + "-" + myDate.getDate() + "<br />" + weekday(myDate.getDay()) + "</dd>"; myDate = new Date(); } $(".move-date dl div").html(html); w1 = $(".move-date").width(); w2 = $(".scroll").width(); $(".move-date dl").width(w1 - w2 * 2); $(".move-date dl").css("left", w2 + "px") ddWidth = (w1 - w2 * 2) / 15; w = ddWidth; $(".move-date dd").width(w - 2); $(".move-date div").width(w * 60); } function weekday(x) { switch(x) { case 0: return "星期日"; break; case 1: return "星期一"; break; case 2: return "星期二"; break; case 3: return "星期三"; break; case 4: return "星期四"; break; case 5: return "星期五"; break; case 6: return "星期六"; break; } } var leftMove = function() { if(!setGo && $(".move-date div").position().left < 0) { setGo = 1; if(setGo) { $(".move-date dl div").css({ left: "+=" + w + "px" }); setTimeout(function() { setGo = 0; if(parseInt($(".move-date div").position().left) == 0){ $(".scroll-left").addClass("disabled"); } }, 220) } } } var rightMove = function() { if(!setGo && (Math.abs(parseInt($(".move-date div").position().left)) + 1) < ($(".move-date div").width() - $(".move-date dl").width())) { setGo = 1; if(setGo) { $(".move-date dl div").css({ left: "-=" + w + "px" }); setTimeout(function() { setGo = 0; if(Math.abs(parseInt($(".move-date div").position().left-1)) == w * 45){ $(".scroll-right").addClass("disabled"); } }, 220) } } } var sel = function(left) { $(".move-date dd").each(function() { if($(this).hasClass("selected")) { $(".move-date div").css("left", "0"); left = $(this).position().left; if($(this).index() > 7 && $(this).index() < 52){ left -= 7 * w; $(".scroll-left,.scroll-right").removeClass("disabled"); } else if($(this).index() <= 7){ left = 0; $(".scroll-left").addClass("disabled"); } else if($(this).index() >= 52) { $(".scroll-right").addClass("disabled"); left = 45 * w ; } $(".move-date div").css({ left: -left + "px" }); return false; } }) } window.onload = function() { reset(); sel();
} window.onresize = function() { reset(); sel(); } $("body").on("click", ".move-date dd", function() { $(this).addClass("selected").siblings().removeClass("selected"); sel(); }) </script>
</html>
