前一阵子客户有需求要显示判断网站添加资料是在几天前或是几个月前所添加的,想想原理是很简单,但由于我是小菜鸟一个,所以决定写下来已备后来之需,同样有需要的也可以过来看下。
首先的要求是网站后台本身是可以获取到本条资料添加的时间的
HTML:
<div class="EIMS_C_40030_308_intro">
<span name="_xn_f_3_telphone221|">created on</span>
<span class="EIMS_C_40018_protime1"></span>
<span class="EIMS_C_40018_protime2">
<%# ((DataHelper.IData)Container.DataItem).GetPropertyToString("DateTime") %></span>
<span class="bk1_ndown_lb_date3">
<ShoveEIMS3:ShoveWebControl_Text ID="bk1_ShoveWebControl_Text2" runat="server" DateShowType="1974-03-07" ShowDateContent="只显示月" Text='<%#((DataHelper.IData)Container.DataItem).GetPropertyToString("DateTime")%>' IsChange="False"></ShoveEIMS3:ShoveWebControl_Text>
</span>
<span class="bk1_ndown_lb_date5">
<ShoveEIMS3:ShoveWebControl_Text ID="bk1_ShoveWebControl_Text3" runat="server" DateShowType="1974-03-07" ShowDateContent="只显示日" Text='<%#((DataHelper.IData)Container.DataItem).GetPropertyToString("DateTime")%>' IsChange="False"></ShoveEIMS3:ShoveWebControl_Text>
</span>
</div>
EIMS_C_40018_protime2所获取日期格式
bk1_ndown_lb_date3获取月份数字
bk1_ndown_lb_date5获取日期数字
<span class="EIMS_C_40018_protime2"> 2018/8/24 9:27:42</span>
<span class="bk1_ndown_lb_date3">8</span>
<span class="bk1_ndown_lb_date5">24 </span>
JS:
xn_c_prodshow_8_proli是表示这是一个列表,使用each循环每条内容里面的时间
$(function(){
var now=(new Date()).getTime();//获取当前时间(从1970.1.1开始的毫秒数)
$(".xn_c_prodshow_8_proli").each(function () {
var time=$(this).find('.EIMS_C_40018_protime2').html()
var day=0;
var hour=0;
timeP=(new Date(time)).getTime();
timeM=parseInt(now-timeP)/1000;
hour = parseInt(timeM/60/60);
var t=hour/24
if(t<1){
t=hour+' hours ago'
}else if(t<30){
t=(Math.floor(t))+" day ago"
}else{
$(".EIMS_C_40018_protime1").hide();
$(".bk1_ndown_lb_date3").show();
$(".bk1_ndown_lb_date5").show();
}
// console.log(time)
$(this).find('.EIMS_C_40018_protime1').html(t)
})
// console.log(now)
上面是在发布时间在距离现在30天内的所要用的js,之后的效果如下
然后是超过30天的直接显示是几月(用英文单词),和日期(数字)显示,js如下:
$(function(){
var arr=["January","February","March","April","May","June","July","August","September","October","November","December"];
$(".xn_c_prodshow_8_proli").each(function(){
var $month=$(this).find(".bk1_ndown_lb_date3").text()-1;
//console.log($month);
var $this=$(this)
for(var i in arr){
$this.find(".bk1_ndown_lb_date3").text(arr[$month]);
//console.log(arr[i] +'/' + i);
}
})
})
显示效果:
第一次写博客,欢迎大家批评指点。