Question

我需要编写一个脚本来显示特定日期的特定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;

我的问题是：

有更清洁的方法吗？
这个脚本中确定日期变量值的最佳方法是什么？
每次过后，我应该如何确保再次隐藏div？

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

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

Answer 1

实现这一目标的一种方法如下：

为有问题的div添加两个属性，例如<div class="simpleDemo row"> <input type="text" class="form-control" placeholder="search" ng-model="searchBox"> <div class="col-md-12"> <div class="row"> <div ng-repeat="(listName, list) in models.lists" class="col-md-6"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">{{listName}} code(s)</h3> </div> <div class="panel-body"> <ul dnd-list="list"> <li ng-repeat="item in list | filter:searchBox" dnd-draggable="item" dnd-moved="list.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}"> {{item.label}} </li> </ul> </div> </div> </div> </div> <div view-source="simple"></div> </div>  </div>和data-display-after，例如：

data-display-before

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

在页面加载时，将当前日期（<div id="valentines" data-display-after="2016-02-14 00:00:00" data-display-before="2016-02-15 00:00:00">...）转换为上述格式。

对于文档中具有new Date属性的每个元素（您需要data-display-before），比较属性值（querySelectorAll）和getAttribute，然后显示元件。

这样，您的JS和您的标记将“解耦”并易于维护。

Answer 2

我会使用momentjs来查看日期。

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

有了片刻，您可以查询之前，之后，之后，两者的组合等。

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

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

2 个答案: