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

Question

I have created a notice board. I want to show the notices in Red color for the first 48 hours. After 48 hour the color of the Notices will be changed. Now what should i change or add in my code?

HTML body for the notice board -

<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 for loading the notice board -

[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

I assume you are using some CMS to add these notices. One option is to check difference between notice/content creation time and now on page load. This can be done easily through javascript get Time function.

If you don't have such value then simply add it to you CMS, to store metadata of creation date and time. Most CMS I have encountered have such possibilities.

Hope this theory will help.

Answer 2

Can you please try this code after appending the html to the div dvNotice ,

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

Answer 3

I'm leveraging the function from this answer to calculate the difference of two dates, based on the assumption that 48 hours == 2 days

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

    }    
}

What's missing here is a real-time verification (and reaction, switching the colors) of the age of the entry: if the page is loaded 47 hours and 59 minutes after the published date, the entry will be red and stay red .