jsp页面中实现时间相减，并且在最近添加的新闻后右上角添加标记(涉及struts2标签和jquey)

时间：2023-01-27 09:03:50

折腾了半天终于弄出来了，可能是对于jquery不是很熟，
需要解决的第一个问题：样式问题，这里没什么好说的，直接贴代码了；

<style>
.list{position:relative}
.ico-new{display:inline-block;*zoom:1;*display:inline;
background:url(http://p6.qhimg.com/t01cb38fa8f09c72b96.png) no-repeat;
left:89%;top:-10px;width:21px;margin-left:2px;height:9px;margin-bottom:5px;
line-height:0;background-position:left -58px}
</style>

上面是css样式，list是

<s:a target="_blank" title="%{title}" action="chengguo_detail?id=%{id}&articleTypeIds=1" cssClass="list"
style="width:410px;">
<s:if test="%{title.length()>30}">
<s:property value="title.substring(0,30)+'...'"/><i id="<s:property value="#article.index"/>" class="ico-new_none"></i>
</s:if> 
<s:else>
                            ${title }<i id="<s:property value="#article.index"/>" class="ico-new_none"></i>
</s:else>
</s:a>

下面是标记以及new标记li，最开始的时候，我想的是这样：

<s:if test="(new java.util.Date().getTime()-postTime.getTime())<24*3600*1000*4">
这里面写css样式
</s:if>
<s:else>
这里面把css样式制空（当然上面的<li的id先前是固定的一个值），这样根本行不通，因为li的id在读取样式的时候，全局的样式对他都是可以使用的，
</s:else>

然后我又想到了第二种方法，可不可以用jquery实现，先定义一个样式表，li的id也是固定的，然后这样

$(document).ready(function(){
                          $("#ico-new_none").removeClass().addClass("ico-new");
                        });

然而还是不行，应为不管你的jquery语句是不是在s:if下面，解析出来，还是全页面用，这样的效果还是要么全部加上new标记，要么全部没有，
后来又试了一种方法，就是用纯jquery语句写，这样实现的效果是只有第一个得到了应有的效果，原因在于jquery在jsp页面只会执行一次，代码如下：

<script>
var postTime='${postTime}';
var nowTime=new Date();

var postTime1 = new Date(Date.parse(postTime));
var nowTime1 = new Date(Date.parse(nowTime));
var leaveDay = parseInt((nowTime1.getTime() - postTime1.getTime()) / (1000 * 60 * 60 * 24)); 
 alert(leaveDay);
if(leaveDay<=3){
 $("#ico-new_none").removeClass().addClass("ico-new"); 
 }
</script>

应为你的(“#ico-new_none”).removeClass().addClass(“ico-new”);   
                        }这一句中id是固定的，网上找了各种资料，最后找到了，需要(“#ico-new_none”).removeClass().addClass(“ico-new”);
}中的id必须是变化的，那么这个s:iterator中什么是变化的呢，就是，article是s:iterator的status的值，这样可以获取每次遍历的时候的序列号，那么问题又来了，怎么样用jquery获取这个值呢，网上看了很多资料，最后的代码这样的

$("#<s:property value='#article.index'/>").addClass("ico-new");

是

<s:if test="(new java.util.Date().getTime()-postTime.getTime())<24*3600*1000*4">
<script type="text/javascript">
 $("#<s:property value='#article.index'/>").addClass("ico-new"); 
</script>
</s:if>
<s:else>
         这里面什么也不做
</s:else>

除此之外也可以全部用jquery实现判断

<script type="text/javascript">
var postTime='${postTime}';
var nowTime=new Date();
var postTime1 = new Date(Date.parse(postTime));
var nowTime1 = new Date(Date.parse(nowTime));
var leaveDay = parseInt((nowTime1.getTime() - postTime1.getTime()) / (1000 * 60 * 60 * 24)); 
 alert(leaveDay);
if(leaveDay<=3){
 $("#<s:property value='#article.index'/>").addClass("ico-new");
 }
</script>这样就不用写s:if语句判断了，至于兼容性暂时没有测试，上面的s:if实现的方法兼容性在ie，360，火狐，谷歌浏览器上面没有问题
标签：

相关文章