撸linux


jquery计算wordpress文章发布时间差、超过3年就提示技术适用性下降的温馨提示

检查wordpress博客发布的时间,如果超过了一定年限,就冒出一个关于文章保质期的温馨提示,这在IT技术快速迭代的今天,不失为提升博客用户好感度的好方法。

用jquery+css实现这一功能,需要format、GetDateDiff的函数,然后从wordpress博文的entry-meta里用jquery的attr方法提取文章发布日期进行计算和判断,最后在适当的地方添加提示框。

废话不多说,直接上代码,代码里有详细的注释。

1,在js里添加如下内容【酌情将$j快捷方式修改为$】:

//时间格式化函数不能少!
Date.prototype.format = function (format) {
    var o = {
        "M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
};
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
    }
    return format;
};
//计算文章发布的时段,如果发布时间超过3年就给一条温馨提示
function GetDateDiff(startTime, endTime, diffType) {
    //xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式
startTime = startTime.replace(/\-/g, "/");
    endTime = endTime.replace(/\-/g, "/");
    //将计算间隔类性字符转换为小写
diffType = diffType.toLowerCase();
    var sTime = new Date(startTime);      //开始时间
var eTime = new Date(endTime);  //结束时间
//作为除数的数字
var divNum = 1;
    switch (diffType) {
        case "second":
            divNum = 1000;
            break;
        case "minute":
            divNum = 1000 * 60;
            break;
        case "hour":
            divNum = 1000 * 3600;
            break;
        case "day":
            divNum = 1000 * 3600 * 24;
            break;
        case "year":
            divNum = 1000 * 3600 * 24 * 365.25;
            break;
        default:
            break;
    }
    //toFixed(1)表示取小数点后1位数
return ((eTime.getTime() - sTime.getTime()) / parseInt(divNum)).toFixed(1);
}

//获取当前日期
var today = new Date();
//格式化当前日期
var todayFmt = today.format("yyyy-MM-dd hh:mm:ss");
//$j("time.published").attr("datetime")表示从当前页面datetime属性获取日期
var dateDiff = GetDateDiff($j("time.published").attr("datetime") + " 00:00:00", todayFmt, "year");
if (dateDiff >= 3.0) {
    timeTip = "本文写于" + dateDiff + "年前。鉴于IT技术(尤其是Linux版本)迭代迅猛,故不敢保证本文内容完全适用。"
}
//setTimeout延缓1000毫秒出现,否则会有问题出现
setTimeout(function () {
    //在文章标题的日期下显示气泡提示框
$j(".single h2.entry-meta").append("<div class='arrow_box'>" + timeTip + "</div>");
    //来一个渐入的特效
$j(".arrow_box").show("slow");
}, 1000);

2,在css文件里添加如下内容:

/*--------------------------------------------------------------
气泡提示框-------------------------------------------------------------- */
.arrow_box{
    position:relative;
    background:#007DDB;
    color:white;border:1px solid #000;
    border-radius:5px;
    top:5px;
    padding:8px 10px;
    font-size:1.15em;
    width:fit-content;
    /*fit-content设置适合内容的宽度,以免拉的过长*/
width:-moz-fit-content;
    /*先设置隐藏,在用jqueryshow将其显示出来*/
display:none;
}
.arrow_box:after,.arrow_box:before{
    bottom:100%;
    left:5em;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
}
.arrow_box:after{
    border-color:rgba(136,183,213,0);
    border-bottom-color:#007DDB;
    border-width:6px;
    margin-left:-30px;
}
.arrow_box:before{
    border-color:rgba(0,255,255,0);
    border-bottom-color:#000;
    border-width:7px;
    margin-left:-31px;
}

效果如下:

直接在原文里查看效果:https://www.lulinux.com/archives/297

也可以用php实现文章保质期提示的功能,但小撸觉得php生成了html实际内容,会被百度搜索引擎认为是文章本身的内容,所以不如js/jquery实现的更好。

 

相关博文



发表评论

电子邮件地址不会被公开。