第一个JS，向经验丰富的JS程序员寻求建议

first JS, looking for advice from experienced JS programmer

本文关键字：JS 程序员 经验丰富 第一个      更新时间：2023-09-26

我需要编写一个脚本来显示特定日期的特定div。到目前为止，我的伪代码如下所示：

import date from local system, //not sure if can/should do this?
var date == dateImported
switch(date){
    case date less than or equal to feb 14th:
          div called .valentines{ display: block;}
    break;
    case date equal to or less than march 17th:
          div called .paddys{display: block}
    break;
    case date between last event and dec 25th:
        div called .christmas display: block;
    break;

我的问题是：

  1. 有没有更清洁的方法可以做到这一点？
  2. 在此脚本中确定日期变量值的最佳方法是什么？
  3. 我应该如何确保每次过后再次隐藏div？

我想我应该尽量不要那么具体，只使用： var mm = today.getMonth（）+1;并且每个月都有一个div，但我想瞄准更高的目标

请不要为我写代码，我想要练习。我只是想要指导，非常感谢。

实现这一点的一种方法是：

向有问题的div 添加两个属性，例如 data-display-after 和 data-display-before ，例如：

<div id="valentines" 
    data-display-after="2016-02-14 00:00:00" 
    data-display-before="2016-02-15 00:00:00">...

最初隐藏这些div（使用CSS）。

在页面加载时，将当前日期（new Date）转换为上述格式。

对于文档中具有 data-display-before 属性的每个元素（您需要 querySelectorAll ），比较属性值 （ getAttribute ），如果currentDate >= data-display-after && currentDate <= data-display-after，则显示该元素。

这样，您的JS和标记将被"解耦"并且易于维护。

我会使用momentjs来检查日期。

var today = moment();
today.isBetween('2014-1-1', '2017-1-1'); // true
today.isBetween('2001-1-1', '2010-1-1'); // false

使用moment，您可以查询之前，相同，之后，两者的组合等。

有了它，您可以使用开关和添加/删除类来隐藏/显示基于这些开关的div，并使用 javascript 库（即 jquery）。

相关文章：