水平日历今天的日期以纯javascript突出显示

Horizontal Calendar todays date highlight in pure javascript

本文关键字：javascript 显示 日历 今天 日期 水平      更新时间：2023-12-23

我最近一直在开发一个移动应用程序，为此我必须从头开始编写日历。我必须在父div的滚动区域中显示日期。我希望日期先出现，而不是隐藏在滚动区域中。请帮我弄清楚如何在浏览器的可见部分提取今天的日期

<div class="calendar">
<div class="scroll-dates">
 <ul>
   <li>Sun</li>
   <li>01</li>
 </ul>
 <ul>
   <li>Sun</li>
   <li>01</li>
 </ul>
 <ul>
   <li>Mon</li>
   <li>02</li>
 </ul>
 <ul>
   <li>Tue</li>
   <li>03</li>
 </ul>
 <ul>
   <li>Sun</li>
   <li>01</li>
 </ul>
 <ul>
   <li>Wed</li>
   <li>04</li>
 </ul>
 <ul>
   <li>Thu</li>
   <li>05</li>
 </ul>
 <ul>
   <li>Fri</li>
   <li>06</li>
 </ul>
 <ul>
   <li>Sat</li>
   <li class="today">07</li>
 </ul>
</div>
</div>

我想这就是您想要的。（jsfiddle）

您可以使用offsetTop获得要查找的div的偏移量，并使用scrollTop:移动父div滚动位置

var offset = $("#container").find("div[day='"+today.toDateString()+"']")[0].offsetTop;
$("#container")[0].scrollTop = offset;

还有一个scrollLeft和offsetLeft。请小心，因为偏移是相对于主体元素的。（存在offsetParent属性）。要在控制台中查看属性，请尝试：

console.dir($("#container")[0]);
相关文章：