Javascript 如何在一段时间后更改文本的颜色?
我已经创建了一个布告栏。我想在前48小时内用红色显示通知。48小时后,通知的颜色将改变。现在我应该在代码中更改或添加什么 公告栏的HTML正文-Javascript 如何在一段时间后更改文本的颜色?,javascript,c#,html,Javascript,C#,Html,我已经创建了一个布告栏。我想在前48小时内用红色显示通知。48小时后,通知的颜色将改变。现在我应该在代码中更改或添加什么 公告栏的HTML正文- <div class="col-md-4"> <div class="widget-item" style="padding-top:0px;margin-top:0px;"> <div class="widget-main-title">
<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);
}
$(文档).ready(函数(){
PageMethods.loadNotice(“”,loadNoticeSuccess);
});
函数加载通知成功(结果){
$(“#dvNotice”).html(“”);
var html=“”;
对于(变量i=0;i”+结果[i]。描述+“”;
html+=“”;
}
html+=“”;
$(“#dvNotice”).append(html);
}
C#加载布告栏的代码隐藏-
[WebMethod]
public static List<Notice> loadNotice(string value)
{
IList<Notice> notice = NoticeManager.GetTopPublishedNotice();
if (notice == null)
{
notice = new List<Notice>();
}
return notice.ToList();
}
[WebMethod]
公共静态列表加载通知(字符串值)
{
IList notice=NoticeManager.GetTopPublishedNotice();
如果(注意==null)
{
注意=新列表();
}
返回通知。ToList();
}
我假设您正在使用一些CMS来添加这些通知。一个选项是检查通知/内容创建时间和当前页面加载时间之间的差异。这可以通过javascript获取时间函数轻松完成
如果您没有这样的值,那么只需将其添加到CMS中,以存储创建日期和时间的元数据。我遇到的大多数CMS都有这样的可能性
希望这一理论能有所帮助。在将html添加到div dv通知后,您能试试这段代码吗
setTimeout(function () {
$('#dvNotice').css('color','yellow');
}, 172800000);
我利用48小时=2天的假设来计算两个日期的差异
var\u MS\u/天=1000*60*60*24;
//a和b是javascript日期对象
函数dateDiffInDays(a,b){
//丢弃时间和时区信息。
var utc1=Date.UTC(a.getFullYear()、a.getMonth()、a.getDate());
var utc2=Date.UTC(b.getFullYear(),b.getMonth(),b.getDate());
返回数学楼层((utc2-utc1)/\u MS\u/天);
}
//调整操作码
函数加载通知成功(结果){
$(“#dvNotice”).html(“”);
var html=“”;
对于(变量i=0;i2;
如果(isPast48Hours){/*设置默认颜色的html*/}
else{/*设置红色的html*/}
//其余代码,使用上面为变量颜色设置的html
}
}
这里缺少的是对条目年龄的实时验证(以及反应,切换颜色):如果页面在发布日期后47小时59分钟加载,条目将变为红色并保持红色。此链接可以帮助您:此处的演示:48小时从“发布日期”开始计算,是?刷新/窗口关闭/导航时中断。。。除非用户打开页面并连续48小时不再触摸浏览器,否则基本上不会工作(浏览器崩溃=再次崩溃,中断)
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
}
}