Question

我正在建立一个小网页，列出我在大学时所做的杰出作业。

以下是代码：

<div class="assignment">
    <div class="itemt green">DUE: 28/03/2014</div>
</div>

以下是实际页面：www.edavies.co/wkc

如果在截止日期之前，我希望使用绿色类，在截止日期前两周使用琥珀色，最后在一周之前使用红色。如果可能的话，在截止日期和之后变黑是很酷的。

希望这是有道理的。一切都很好，PHP，JavaScript，jQuery。

Answer 1

正如您可以使用PHP一样简单。

在html中添加占位符

<div class="item color_by_date_id1">DUE: 28/03/2014</div>

然后在请求中解析页面，根据今天的日期和特定占位符的日期间隔替换占位符，该占位符可以存储在服务器端配置文件中或更好地与项目本身一起存储

我确信您可以在构建网站之后修复实际编码：）

Answer 2

检查http://jsfiddle.net/NhmW7/，测试它是否更改了这些日期。我为这个问题所做的功能。

$( ".itemt" ).each(function() {

            var text=$(this).text();
            var res = text.split(" "); 
            var resta = res[1].split("/"); 
            var dd=resta[0];
            var mm=resta[1];
            var yy=resta[2];   // i couldnt test with dd/mm/yyy format, so i changed to mm/dd/yyy

            var now = new Date(); //"now"
            var duedate = new Date(mm+'/'+dd+'/'+yy)  // due date
            var diff = Math.abs(now-duedate); 

             var each_day = 1000 * 60 * 60 * 24;//milliseconds in a day
             var days = Math.round(diff / each_day);

             if(days <= 14)
                 $(this).removeClass("green").addClass("amber");
             if(days <= 7)
                 $(this).removeClass("amber").addClass("red");
             if(days > 14)
                 $(this).addClass("green");
         });

Answer 3

我会选择以下路线：

将您的作业存储在JSON数组中

{ "assignments": [ { "name": "Assignment 1", "dueDate": "11/03/2014" }, { "name": "Assignment 2", "dueDate": "11/04/2014" }, { "name": "Assignment 3", "dueDate": "11/07/2014" } ] }

查看Handlebars，Mustache也是如此
构建模板并添加一些自定义帮助函数（Handlebars上的教程）以根据dueDate更改类

Answer 4

您可以使用Javascript。使用jquery的解决方案应该类似于添加以下代码：

<script type="text/javascript">
$(document).ready(function(){
  var dueDate = new Date(2014,3, 28);
  var today = new Date();

  if (today>= dueDate){
    // or other conditions
    $(".itemt").addClass("expired");
 }else{
    $(".itemt").addClass("expired"); 
}
});
</script>

这是个主意 - 您可以通过比较javascript中的日期来管理css类。祝你好运！

根据日期更改div类

4 个答案: