【转】[JavaScript]只需一行代码，轻松搞定快捷留言功能 小助手功能

[JavaScript]只需一行代码，轻松搞定快捷留言功能

//作者：Justin
//出处：http://justinw.cnblogs.com/
//版权：转载请保留出处即可。
//版本：V1.0 beta
//最后更新：201003300330
//备注：如有问题，可以优先到 http://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html 留言提问。

//--begin--jMsg---
function jMsg() { }

//初始化动作
jMsg.prototype.setup = function() {
    jMsg.loadEvent(this.combat);
    //jMsg.loadEvent(jMsg.msgDIV);
    jMsg.msgDIV();
}

//提交留言信息
jMsg.prototype.post = function(msg) {
    //这里通过判断HaveUp标志位，来防止反复提交相同留言。
    if (window.top.HaveUp) {
        alert('您已经顶过了！谢谢朋友 ：）');
        return;
    }

    var txt = document.getElementById('tbCommentBody');
    if (txt != null) {
        txt.style.backgroundColor = "#E4F5FF";
        var date = new Date();
        txt.value = msg;
        txt.focus();
        //如果提交过一次快捷留言，HaveUp就设置为true
        //每次重新进入页面，HaveUp就会被初始化。
        window.top.HaveUp = true;
        //这是博客园提交留言用的方法，通过这里正是提交留言。
        //如果没有登录就直接在客户端调用这个方法，内部会抛个错。(博客园代码问题，没有判空)
        PostComment();
    }
    else {
        //目前博客园功能上约束只有登录后才能提交留言。
        //如果找不到tbCommentBody元素，可以认为当前用户没有登录。
        alert("使用博客园留言功能需要先登录哦！");
    }
}

//推荐
jMsg.prototype.recommend = function() {
    var diggit = jMsg.getElementsByClassName('diggit');
    if ((diggit) && (diggit[0])) {
        diggit[0].onclick();
    }
    else {
        alert("Debug:推荐按钮的ClassName改名了！");
    }
}

//反对
jMsg.prototype.combat = function() {
    var buryitMsg = function() {
        //目前博客园推荐和反对都是不记名的，被反对了当然希望知道原因啦。
        //这个功能只能做到防君子不防小人，仅仅是给了个提示而已。        
        var txt = document.getElementById('tbCommentBody');
        if (txt != null) {
            alert('这枚同学，非常希望能听到您的宝贵意见，请赐教...');
            txt.style.backgroundColor = "#fe9ab3";
            txt.focus();
        }
    }
    var buryit = jMsg.getElementsByClassName('buryit');
    if ((buryit) && (buryit[0])) {
        jMsg.addEvent(buryit[0], "click", buryitMsg);
    }
}

//提交留言的同时推荐
jMsg.prototype.superPost = function(msg) {
    this.post(msg);
    //这里增加询问功能，不支持自动直接推荐
    if (confirm("您是否要同时推荐该篇文章呢？")) {
        this.recommend();
    }
}

//附加onload事件
jMsg.loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = fn;
    } else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}

//附加事件
jMsg.addEvent = function(obj, type, fn) {
    if (obj.addEventListener)
        obj.addEventListener(type, fn, true);
    else if (obj.attachEvent) {
        obj.attachEvent("on" + type, function() {
            fn();
        });
    }
}

//通过ClassName找到DOM元素
jMsg.getElementsByClassName = function(n) {
    var el = [],
        _el = document.getElementsByTagName('*');
    for (var i = 0; i < _el.length; i++) {
        if (_el[i].className == n) {
            el[el.length] = _el[i];
        }
    }
    return el;
}

//快捷留言的浮动导航条
jMsg.msgDIV = function() {
    //是否出现浮动条。
    if (!(window.location.href.indexOf(".html") > -1)) return;

    //动态计算浮动滚动条的位置
    lastScrollY = 0;
    var beat = function() {
        var diffY;
        if (document.documentElement && document.documentElement.scrollTop)
            diffY = document.documentElement.scrollTop;
        else if (document.body)
            diffY = document.body.scrollTop
        else
        { /*Netscape stuff*/ }

        percent = .1 * (diffY - lastScrollY);
        if (percent > 0) percent = Math.ceil(percent);
        else percent = Math.floor(percent);
        document.getElementById("msgDiv").style.top = parseInt(document.getElementById("msgDiv").style.top) + percent + "px";

        lastScrollY = lastScrollY + percent;
    }

    msgDivCode = "<div id=\"msgDiv\" style='text-align:right; width:300px; z-index:2010; right:10px; top:400px; position:absolute;'><img src=\"http://images.cnblogs.com/cnblogs_com/justinw/24983/o_hel.gif\" /><a onclick=\"$jMsg.superPost('继续努力!大气象!');return false;\" href=\"###\"><span style=\"font-size: 30pt;\">我要顶!</span></a>&nbsp;<a onclick=\"$jMsg.post('大气象!路过打个招呼!');return false;\" href=\"###\"><span style=\"font-size: 18pt;\">路过</span></a><br /><strong><span style=\"color: red; font-size: 10pt;\">{快捷链接会直接提交留言或推荐}</span></strong></div>";
    document.write(msgDivCode);

    window.setInterval(beat, 120);
}
//--end--jMsg---
//todo:提供设置是否显示浮动条的接口
//todo:提供自定义浮动条图片的接口
//todo:提供完全自定义浮动条内容的接口
//todo:提供浮动条以外的交互模式接口
var $jMsg = new jMsg();
$jMsg.setup();