求一个js代码来取出整个页面特定标签处的内容并进行css属性修改.

<span class=post_date>2009-03-18 02:34 </span> 
<span class=post_date>2009-03-19 02:34 </span> 
<span class=post_date>2009-01-13 23:34 </span> 
<span class=post_date>2009-03-20 11:34 </span> 
<script>
var spans = document.getElementsByTagName('span');
var day = 24*60*60*1000;
var now = new Date().getTime(), one = new Date().toDateString();
var two = new Date(now-day).toDateString(), three = new Date(now - day*2).toDateString();
for(var i=0; i<spans.length; i++){
if(spans[i].className=='post_date'){
var d = spans[i].innerHTML.replace('-','/');
var cur = new Date(d).toDateString();
if(cur == one) spans[i].style.color='red';
else if(cur==two) spans[i].style.color='green';
else if(cur == three) spans[i].style.color='blue';
}
}
</script>

解决方案 »

  1.   


    <html>
    <head>
    <style type="text/css">
    .post_date { color: #0000ff; }
    .post_date_now { color:#ff0000; }
    .post_date_yest { color:#cccc00; }
    .post_date_bef { color:#cc00cc; }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkDateColor() {
    var dateParts = document.getElementsByTagName('span');
    d = new Date();
    for(var datePart in dateParts) {
    if(dateParts[datePart].group == 'datespan') {
    con = new Date(dateParts[datePart].innerHTML.replace('-','/'));
    switch(Math.ceil((con - d)/86400000)) {
    case 1:
    dateParts[datePart].className = 'post_date_now';
    break;
    case 2:
    dateParts[datePart].className = 'post_date_yest';
    break;
    case 3:
    dateParts[datePart].className = 'post_date_bef';
    break;
    default:
    dateParts[datePart].className = 'post_date';
    }
    }
    }
    }
    //-->
    </SCRIPT>
    </head>
    <body onload="checkDateColor();">
    <span class="post_date" group="datespan">2009-03-20 23:34 </span> 
    <span class="post_date" group="datespan">2009-03-21 23:34 </span> 
    <span class="post_date" group="datespan">2009-03-22 23:34 </span> 
    <span class="post_date" group="datespan">2009-04-19 11:34 </span> 
    </body>
    </html>
    我这也算是一种方法吧，不和楼上方式不一样，而且加个group可以避免对别的span的影响
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .post_date{font-weight:bold;}
    .pink{color:pink;}
    .red{color:red}
    .blue{color:blue}
    .green{color:green}
    .other{color:gray;}
    </style>
    <script type="text/javascript">
    String.prototype.trim = function(){
        return this.replace(/^\s+|\s+$/g,'');
    }
    function $(selector){
        return document.getElementById(selector);
    }
    function $T(selector,context){
        return (context||document).getElementsByTagName(selector);
    }
    function init(){
        var sps = $T('span');
        var now = new Date(), 
            todayZero = +new Date(now.getFullYear(),now.getMonth(),now.getDate()),
            yestZero = todayZero - 86400000,
            beforZero = yestZero - 86400000;
        for(var i = 0,len=sps.length ;i<len ; i++){
            var sp = sps[i];
            if(!/post_date/.test(sp.className)) continue;
            var dt = +new Date(sp.innerHTML.trim().replace('-','/')) , cn = '';
            if(dt >= +now){
                //这种情况没提
                cn = 'pink';
            }else if(dt>=todayZero){
                cn = 'red';
            }else if(dt>=yestZero){
                cn = 'green';
            }else if(dt>=beforZero){
                cn = 'blue';
            }else{
                cn = 'other';
            }
            sp.className += ' '+cn;
        }};
    window.onload = init;
    </script>
    </head><body>
    <span class="post_date">2009-03-10 23:34 </span> <br/>
    <span class="post_date">2009-03-19 23:34 </span> <br/>
    <span class="post_date">2009-03-20 23:34 </span> <br/>
    <span class="post_date">2009-03-21 11:34 </span> <br/>
    <span class="post_date">2009-03-22 11:34 </span> <br/>
    </body>
    </html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>时间变色</title>
    <script type="text/javascript">
    var time=new Date();
    var yy=time.getFullYear();
    var mm=time.getMonth()+1;
    var dd=time.getDate();
    function IsDateTime(t){ 
    var re = /^(\d{1,4})(-)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2})/;
    return re.test(t);     
    }function changColor(_obj,_time){
    var _yy=_time.split(" ")[0].split("-")[0];
    var _mm=_time.split(" ")[0].split("-")[1];
    var _dd=_time.split(" ")[0].split("-")[2];
    if(_yy<yy ||_mm<mm||_yy<=yy && _mm<=mm && _dd<dd )//今天以前
    _obj.style.color="#0d9";
    else if (_yy==yy && _mm==mm && _dd==dd)//今天
    _obj.style.color="#d00";
    else if (_yy>yy ||_mm>mm||_yy>=yy && _mm>=mm && _dd>dd) //今天以后
    _obj.style.color="#66f";
    }onload=function(){
    // var obj=document.getElementById("???").getElementsByTagName("span"),j=obj.length;
    var obj=document.getElementsByTagName("span"),j=obj.length;
    for (var i=0;i<j;i++){
    var tmp=obj[i].innerHTML;
    if (obj[i].className=="post_date" && IsDateTime(tmp))
    changColor(obj[i],tmp);
    }
    }
    </script>
    </head><body>
    <span class="post_date">2009-04-19 23:30 </span> <br/>
    <span class="post_date">2009-03-20 23:30 </span> <br/>
    <span class="post_date">2009-03-21 23:30 </span> <br/>
    <span class="post_date">2009-03-22 23:30 </span> <br/>
    <span class="post_date">2009-02-23 23:30 </span> <br/>
    </body>
    </html>