Question

我已经创建了一个告示板。我想在最初的48小时内以红色显示通知。 48小时后，通知的颜色将会改变。现在我应该在代码中更改或添加什么内容？

布告栏的HTML正文 -

<div class="col-md-4">
            <div class="widget-item" style="padding-top:0px;margin-top:0px;">
                        <div class="widget-main-title">
                            <h4 class="widget-title">Notice Board</h4>
                        </div> <!-- /.widget-main-title -->
                        <marquee id="dvNotice" FACE="courier" BEHAVIOR="SCROLL" height="247px" onmouseout="this.setAttribute('scrollamount', 2, 0);" onmouseover="this.setAttribute('scrollamount', 0, 0);" scrollamount="2" direction="up" style="text-align: left;">
                            <%--<div class="widget-inner" id="dvNotice">

                            </div> --%><!-- /.widget-inner -->
                        </marquee>
                    <!-- /.request-information -->
            </div> <!-- /.widget-item -->
        </div>

JQuery / JavaScript -

$(document).ready(function () {
PageMethods.loadNotice('', loadNoticeSuccess);
});
function loadNoticeSuccess(result) {
        $("#dvNotice").html('');
        var html = "";
        for (var i = 0; i < result.length; i++) {
            var month_value = result[i].PublishedDate.getMonth();
            var day_value = result[i].PublishedDate.getDate();
            html += "<div class=\"event-small-list clearfix\">";
            html += "<div class=\"calendar-small\"><span class=\"s-month\">" + months[month_value] + "</span><span class=\"s-date\">" + day_value + "</span></div>";
            //html += "<div class=\"event-small-details\"><h5 class=\"event-small-title\"><a href=\"event-single.html\">" + result[i].Title + "</a></h5><p class=\"event-small-meta small-text\">" + result[i].Description + "</p></div></div>";
            html += "<div class=\"event-small-details\"><h5 class=\"event-small-title\"><a href=\"Pages/NoticeBoard/NoticeDetails.aspx?noticeid=" + result[i].NoticeID + "\">" + result[i].Title + "</a></h5><p class=\"event-small-meta small-text\"></p></div></div>";
        }
        html += "<div class=\"event-small-list clearfix\" style=\"text-align:right;padding:0;\"><a href=\"Pages/NoticeBoard/NoticeBoard.aspx\">More</a></div>";
        $("#dvNotice").append(html);
    }

C＃Code Behind加载公告牌 -

[WebMethod]
    public static List<Notice> loadNotice(string value)
    {
        IList<Notice> notice = NoticeManager.GetTopPublishedNotice();
        if (notice == null)
        {
            notice = new List<Notice>();
        }
        return notice.ToList();
    }

Answer 1

我假设您正在使用某些CMS添加这些通知。一种选择是检查通知/内容创建时间与现在页面加载之间的差异。这可以通过javascript get Time功能轻松完成。

如果您没有这样的价值，那么只需将其添加到CMS，即可存储创建日期和时间的元数据。我遇到的大多数CMS都有这样的可能性。

希望这个理论有所帮助。

Answer 2

您可以在将html附加到div dvNotice

后尝试此代码

setTimeout(function () {
        $('#dvNotice').css('color','yellow'); 
 }, 172800000);

Answer 3

我利用the function from this answer计算两个日期的差异，假设 48小时== 2天

var _MS_PER_DAY = 1000 * 60 * 60 * 24;

// a and b are javascript Date objects
function dateDiffInDays(a, b) {
  // Discard the time and time-zone information.
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

// tweaked OP code
function loadNoticeSuccess(result) {
    $("#dvNotice").html('');
    var html = "";
    for (var i = 0; i < result.length; i++) {
        var isPast48Hours = dateDiffInDays(new Date(), result[i].PublishedDate) > 2;    
        if (isPast48Hours) { /*setup html for default color*/ }        
        else { /*setup html for red color */ }

        // rest of code, using the html you setup above for the variable color

    }    
}

这里缺少的是条目年龄的实时验证（以及反应，切换颜色）：如果页面在发布日期后47小时59分钟加载，则条目将是红色并保持红色。

如何在一段时间后更改文本的颜色？

3 个答案: